| 動くグラデーション文字列です。
 設定した色にどんどん変化していきます。
 
 サンプルのように複数の色味を使ったり、1つの色で濃淡を使い分けたり出来ます。
 
 ・サンプルを見る
 ・ソースを保存する
 (右クリック→「対象をファイルに保存」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
	iro=new Array();
	//グラデーションさせたい色を指定する
	iro[0]="#ffff00";
	iro[1]="#ffa500";
	iro[2]="#ff0000";
	iro[3]="#ff1493";
	iro[4]="#ffb6c1";
	iro[5]="#8a2be2";
	iro[6]="#00008b";
	iro[7]="#1e90ff";
	iro[8]="#7fffd4";
	iro[9]="#228b22";
	//グラデーションさせたい文字列を指定する
	moji="グラデーション文字列だよ。";
	//グラデーションさせたい文字列の大きさを指定する
	moji_size=3;
	//グラデーションさせたい文字を表示する横位置を指定する
	x_iti=100;
	//グラデーションさせたい文字を表示する縦位置を指定する
	y_iti=100;
	//グラデーションする早さを秒数で指定する
	sokudo=100;
	a=0;	doko=0;
	function my_gradation()
		{
		hyouji_moji="";   moji_doko=0;   color_doko=doko;
		while(moji_doko<moji.length)
			{
			if(color_doko>=iro.length)color_doko=0;
			hyouji_moji+='<font size="'+moji_size+'" color="'+iro[color_doko]+'">'+moji.charAt(moji_doko)+'</font>';
			moji_doko++;  color_doko++;
			}
		doko++;
		if(doko>=iro.length)doko=0;
		if(document.layers){
		document.layers["lay0"].moveTo(x_iti,y_iti);
		document.layers["lay0"].document.open();
		document.layers["lay0"].document.write("<table><tr><td nowrap>"+hyouji_moji+"</td></tr></table>");
		document.layers["lay0"].document.close();
		document.layers["lay0"].visibility='show';}
		else if((document.getElementById) && (!document.all)){
		document.getElementById("lay0").style.left=x_iti;
		document.getElementById("lay0").style.top=y_iti;
		document.getElementById("lay0").innerHTML="<table><tr><td nowrap>"+hyouji_moji+"</td></tr></table>";
		document.getElementById("lay0").style.visibility='visible';}
		else if(document.all){
		document.all("lay0").style.pixelLeft=x_iti;
		document.all("lay0").style.pixelTop=y_iti;
		document.all("lay0").innerHTML="<table><tr><td nowrap>"+hyouji_moji+"</td></tr></table>";
		document.all("lay0").style.visibility='visible';}
		clearTimeout(a);   a=setTimeout('my_gradation();',sokudo);
		}
//-->
</script>
</head>
<body onLoad="my_gradation();"><br>
<span id="lay0" style="position:absolute;visibility:hidden;"></span>
</body></html>
 
 [ 解説 ]
 
 まずグラデーションに使用する色を、設定します。
 色は全部で10色指定できます。
 
 ソースの上から7〜16行目に、色のRGB値が設定されています。
 各色は、グラデーションが始まる順に並んでいます。
 
 お好きな色にご変更下さい。
 RGB値での色指定がわからない場合、色名による指定でも結構です。
 その際はRGB値を書いてある部分に、色名をお書き下さい。
 
 次に、実際にグラデーションがかかる文字列を指定します。
 上から18行目にある「グラデーション文字列だよ。」と書かれた部分に、
お好きなメッセージをお書き下さい。
 
 表示される文字の大きさを変更されたい場合、上から20行目にある「moji_size=3;」の「3」の部分をご変更下さい。
 サイズは1〜7まで指定できます。
 1が一番小さく、数字が大きくなるほど文字サイズも大きくなります。
 
 次に、グラデーション文字列が表示される位置を指定します。
 上から21行目の「x_purasu=30;」の「30」を変更すると横位置が、
 上から22行目の「y_purasu=20;」の「20」を変更すると縦位置が変わります。
 
 グラデーションの早さを変えたい場合は、上から23行目の「sokudo=100;」の「100」の部分をご変更下さい。
 
 |