TAKABO SOFT NETWORK

まず、ヘッダーの部分に以下のプログラムを組み込みます。

<head>

<script language="javascript">
<!--

var Str="流れるグラデーショーン～なんか綺麗かも";
var Col=new Array();
Col[0]="0000ff";	//色指定  半角英数小文字6桁
Col[1]="ff0000";
Col[2]="00ff00";
//以下Col[3]=...Col[4]=..と続けて書ける

var Reso=16;		//Col[?]→Col[?+1]の色へ、何回にかけて変更するか
var Speed=50;		//更新速度 小さいほど速い

var ColLen=Col.length;
var RGB=new Array(ColLen);
var hex="0123456789abcdef";
var Obj;
var Length;
var ColPos=0;
var ResoPos=0;

function stov(str){
	var i;
	for(i=0;i<16;i++)
		if(hex.charAt(i)==str)
			return i;
}

function vtos(value){
	if(value<0)
		return "0";
	return hex.charAt(value);
}

function GetCol(){
	var data="#",i,n;
	var ColPosNext=(ColPos+1)%ColLen;
	for(i=0;i<3;i++){
		n=Math.floor(RGB[ColPos][i]+(RGB[ColPosNext][i]-RGB[ColPos][i])/(Reso-1)*ResoPos);
		data+=vtos(Math.floor(n/16))+vtos(n%16);
	}
	if(++ResoPos>=Reso){
		ResoPos=0;
		ColPos=ColPosNext;
	}
	return data;
}

function SetGrad(){
	var i,j;
	Length=Str.length;
	Obj=new Array(Length);
	for(i=0;i<Length;i++){
		document.write("<font id=\"FONT_"+i+"\">"+Str.charAt(i)+"</font>");
		eval("Obj[i]=FONT_"+i);
	}
	
	for(i=0;i<ColLen;i++){
		RGB[i]=new Array(3);
		for(j=0;j<3;j++)
			RGB[i][j]=stov(Col[i].charAt(j*2))*16+stov(Col[i].charAt(j*2+1));
	}

	for(i=Length-1;i>=0;i--)
		Obj[i].color=GetCol();

	setInterval("GradLoop()",Speed);
}

function GradLoop(){	
	var i;
	for(i=Length-1;i>0;i--)
		Obj[i].color=Obj[i-1].color;
	Obj[0].color=GetCol();
}

//-->
</script>

</head>

あとは、<body>～</body>内の表示したい場所へ、以下のように記述します。表示したい文字列や、更新速度はヘッダー内の冒頭にて設定します。
このスクリプトはページ内に1つだけ設置出来ます。