WEST MiRa(1,739 Byte)
JavaScript(1,601 Byte)

■ JavaScript - サンプル集(257種類) - スクロール
   - フェードイン・フェードアウトしながらスクロールする文字列

画面が読み込まれた時に、文字列が縦にスクロールして表示されるスクリプトです。
文字列は、だんだんとサイズが大きくなって色も濃くなって表示されます。
消えていく時は、サイズがまた小さくなって色が薄くなって消えていきます。
映画などで流れるスタッフロールのような感じです。

サンプルを見る
ソースを保存する
(右クリック→「対象をファイルに保存」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行を削除する場合は以下のようになります。

変更前変更後
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]="後ろの正面だぁれ";
反対に、8行以上に増やしたい場合は、必要なだけ行を増やしていきます。
増やした行は、先頭に付いている数字を変更しなければなりません。

見ていただければおわかりの通り、先頭に付いている数字は、 上から順に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」を縦位置として表示します。


バナー、リンクについて  ,   利用規約  ,   ヘルプ

Copyright (C) 1998-2007 WEST MiRa. All rights reserved.