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

■ JavaScript - サンプル集(257種類) - 色
   - グラデーション文字列

動くグラデーション文字列です。
設定した色にどんどん変化していきます。

サンプルのように複数の色味を使ったり、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」の部分をご変更下さい。


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

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