| 画面が読み込まれた時に、文字列が縦にスクロールして表示されるスクリプトです。
 文字列は、だんだんとサイズが大きくなって色も濃くなって表示されます。
 消えていく時は、サイズがまた小さくなって色が薄くなって消えていきます。
 映画などで流れるスタッフロールのような感じです。
 
 ・サンプルを見る
 ・ソースを保存する
 (右クリック→「対象をファイルに保存」or「リンクを名前を付けて保存」して下さい。)
 ・ソースを見る
 ・解説を見る
 
 
 
 
 
 [ ソース ]
 
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<script language="JavaScript">
<!--//Copyright (C) WEST MiRa http://www.west-mira.jp
	moji=new Array();
	//開始時の文字色(一番薄い色)
	start_color="d8c3af";
	//終了時の文字色(一番濃い色)
	end_color="5b4129";
	//開始時の文字サイズ(一番小さいサイズ)
	start_size=10;
	//文字サイズの変更度合い(指定したサイズ分で、大きくなったり小さくなったりします)
	size_plus=4;
	//表示する文字列
	moji[0]="ずいずいずっころばし ごまみそずい";
	moji[1]="茶壺にはまって どっぴんしゃん";
	moji[2]="抜けたら どんどこしょ";
	moji[3]="俵のねずみが 米食ってちゅー";
	moji[4]="ちゅーちゅーちゅー";
	moji[5]="おとさんが呼んでも おかさんが呼んでも";
	moji[6]="行きっこなぁしよ";
	moji[7]="井戸の周りでお茶碗かいたの だぁれ";
	//表示する桁数
	y_kazu=9;
	//スクロール速度
	times=500;
	//表示する領域の横幅
	my_width=300;
	//センター表示チェック。1ならセンター表示、0なら指定位置優先
	cen_han=1;
	//表示位置
	x_iti=300;
	y_iti=50;
	//その他、色やサイズ以外に加えたいタグ
	tagu1='';
	tagu2='';
	y_max=Math.ceil(y_kazu/3);
	iro="0123456789abcdef";
	haji1=eval("0x"+start_color.substring(0,2));
	haji2=eval("0x"+start_color.substring(2,4));
	haji3=eval("0x"+start_color.substring(4,6));
	haji11=eval("0x"+end_color.substring(0,2));
	haji22=eval("0x"+end_color.substring(2,4));
	haji33=eval("0x"+end_color.substring(4,6));
	if(start_color<end_color)
		{
		kazu1=Math.ceil((haji11-haji1)/y_max);
		kazu2=Math.ceil((haji22-haji2)/y_max);
		kazu3=Math.ceil((haji33-haji3)/y_max);
		}
	else 
		{
		kazu1=-Math.ceil((haji1-haji11)/y_max);
		kazu2=-Math.ceil((haji2-haji22)/y_max);
		kazu3=-Math.ceil((haji3-haji33)/y_max);
		}
	haji_taihi1=haji1;
	haji_taihi2=haji2;
	haji_taihi3=haji3;
	colors=new Array();
	my_size=new Array();
	for(i=0; i<y_kazu; i++)
		{
		if(i == 0){ colors[i]=start_color; my_size[i]=start_size; }
		else if(i < y_max)
			{
			haji_taihi1+=kazu1;
			haji_taihi2+=kazu2;
			haji_taihi3+=kazu3;
			colors[i]=haji_taihi1.toString(16)+haji_taihi2.toString(16)+haji_taihi3.toString(16);
			my_size[i]=my_size[i-1]+size_plus;
			}
		else if(i < y_max*2) { colors[i]=end_color; my_size[i]=my_size[i-1]; }
		else { colors[i]=colors[y_kazu-i-1]; my_size[i]=my_size[y_kazu-i-1]; }
		}
	my_time=0; j=0; hajime=0;
	mojis="";
	function fade2()
		{
		if(cen_han == 1)
			{
			if((document.layers) || ((document.getElementById) && (!document.all)))
				{
				x_iti=(outerWidth-my_width)/2;
				y_iti=outerHeight/3;
				}
			else 
				{
				x_iti=(document.body.clientWidth-my_width)/2;
				y_iti=document.body.clientHeight/3;
				}
			}
		if(hajime < y_kazu)
			{
			doko=y_kazu-1;
			for(i=0; i<y_kazu-hajime; i++){ mojis+='<font style="color:#'+colors[doko]+';font-size:'+my_size[doko]+';">  </font><br>'; doko--; }
			for(i=0; i<hajime; i++)
				{
				mojis+='<font style="color:#'+colors[doko]+';font-size:'+my_size[doko]+';">'+moji[i]+'</font><br>';
				doko--;
				if(doko < 0)doko=y_kazu-1;
				}
			}
		else 
			{
			doko=y_kazu-1;
			for(i=j; i<j+y_kazu; i++)
				{
				if(i < moji.length)
					mojis+='<font style="color:#'+colors[doko]+';font-size:'+my_size[doko]+';">'+moji[i]+'</font><br>';
				else mojis+='<font style="color:#'+colors[doko]+';font-size:'+my_size[doko]+';">  </font><br>';
				doko--;
				if(doko < 0)doko=y_kazu-1;
				}
			}
		iros2=iro.charAt(j);
		if(document.layers)
			{
			document.layers["lay1"].moveTo(x_iti,y_iti);
			document.layers["lay1"].document.open();
			document.layers["lay1"].document.write(tagu1+mojis+tagu2);
			document.layers["lay1"].document.close();
			document.layers["lay1"].visibility='show';  }
		else if((document.getElementById) && (!document.all)){
			document.getElementById("lay1").style.top=x_iti;
			document.getElementById("lay1").style.left=y_iti;
			document.getElementById("lay1").innerHTML=tagu1+mojis+tagu2;
			document.getElementById("lay1").style.visibility='visible';  }
		else if(document.all){
			document.all("lay1").style.pixelLeft=x_iti;
			document.all("lay1").style.pixelTop=y_iti;
			document.all("lay1").innerHTML=tagu1+mojis+tagu2;
			document.all("lay1").style.visibility='visible';  }
		hajime=(hajime < moji.length+y_kazu-1)?hajime+1:0;
		if(hajime == y_kazu)j=1;
		else if(hajime > y_kazu)j++;
		mojis="";
		clearTimeout(my_time);
		my_time=setTimeout('fade2()',times);
		}
//-->
</script>
</head>
<body onLoad="fade2();" bgcolor="#ffffff"><br>
<span id="lay1" style="position:absolute;visibility:hidden;"></span>
</body></html>
 [ 解説 ]
 
 変更可能箇所は、ソース内に注意書きがついていますので、そちらをご覧下さい。
 
 「開始時の文字色」と「終了時の文字色」を指定すると、それ以外の色は自動的に判別して色を区分けします。
 
 この時、必ず色はRGB指定して下さい。
 色名での指定は出来ません。
 文字サイズも同じく、自動的にサイズが変動します。
 しかし、文字サイズの場合は、サイズ変更の度合いを指定できます。
 「size_plus=4;」の場合は、文字サイズが4ずつ大きくなったり小さくなったりします。
 「表示する文字列」の以下にある文字列部分を書き換えると、表示される文字列が変わります。
 サンプルで使用している文字列は、全部で8行有ります。
 moji[0]="ずいずいずっころばし ごまみそずい";
 が1行目、
 moji[1]="茶壺にはまって どっぴんしゃん";
 が2行目の文字列です。
 
 サンプルでは8個の文章がありますが、もし使用する文字列が8行未満の場合は不要な行を下から削除して下さい。
 
 例えば、実際に使用する文字列は4行だけで、不要な4行を削除する場合は以下のようになります。
 
 
 
反対に、8行以上に増やしたい場合は、必要なだけ行を増やしていきます。| 変更前 | 変更後 | 
|---|
 | moji=new Array(); moji[0]="ずいずいずっころばし ごまみそずい";
 moji[1]="茶壺にはまって どっぴんしゃん";
 moji[2]="抜けたら どんどこしょ";
 moji[3]="俵のねずみが 米食ってちゅー";
 moji[4]="ちゅーちゅーちゅー";
 moji[5]="おとさんが呼んでも おかさんが呼んでも";
 moji[6]="行きっこなぁしよ";
 moji[7]="井戸の周りでお茶碗かいたの だぁれ";
 | moji=new Array(); moji[0]="かごめかごめ 籠の中の鳥は";
 moji[1]="いついつ出やる";
 moji[2]="夜明けの晩に 鶴と亀が滑った";
 moji[3]="後ろの正面だぁれ";
 |  増やした行は、先頭に付いている数字を変更しなければなりません。
 
 見ていただければおわかりの通り、先頭に付いている数字は、
上から順に0,1,2,3,……・と、1つずつ大きくなっています。
 同じように、増やした行も適切に数値を書き換えて下さい。
 
 例えば、サンプルの8行を1行増やす場合は、以下のようになります。
 
 
 
「表示する桁数」、「スクロール速度」、「表示する領域の横幅」は、
お好きな数字を指定して下さい。| 変更前 | 変更後 | 
|---|
 | moji=new Array(); moji[0]="ずいずいずっころばし ごまみそずい";
 moji[1]="茶壺にはまって どっぴんしゃん";
 moji[2]="抜けたら どんどこしょ";
 moji[3]="俵のねずみが 米食ってちゅー";
 moji[4]="ちゅーちゅーちゅー";
 moji[5]="おとさんが呼んでも おかさんが呼んでも";
 moji[6]="行きっこなぁしよ";
 moji[7]="井戸の周りでお茶碗かいたの だぁれ";
 | moji=new Array(); moji[0]="とおりゃんせ とおりゃんせ";
 moji[1]="ここはどこの細道じゃ";
 moji[2]="天神様の細道じゃ";
 moji[3]="ちょっと通してくだしゃんせ";
 moji[4]="ご用のないもの通しゃせぬ";
 moji[5]="この子の7つのお祝いに";
 moji[6]="お札を収めに参ります";
 moji[7]="行きは良い良い 帰りは怖い";
 moji[8]="怖いながらも とおりゃんせとおりゃんせ";
 |  
 ただし、「スクロール速度」は必ず「50」以上の値を指定して下さい。
 短すぎると速度が速すぎるだけでなく、エラーを引き起こすかも知れません。
 
 「センター表示チェック」は、1を指定すると自動的に真ん中表示になります。
 0が指定されている場合は、「表示位置」の「x_iti」を横位置として「y_iti」を縦位置として表示します。
 
 |