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

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

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

サンプルのように複数の色味を使ったり、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=new Array();

	//グラデーションさせたい文字列を指定する
	moji[0]="グラデーション文字列だよ。";
	moji[1]="2行目なんだよね。";
	moji[2]="3行目もあるよ。";

	//グラデーションさせたい文字列の大きさを指定する
	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;
		for(i=0; i<moji.length; i++)
			{
			while(moji_doko<moji[i].length)
				{
				if(color_doko>=iro.length)color_doko=0;
				hyouji_moji+='<font size="'+moji_size+'" color="'+iro[color_doko]+'">'+moji[i].charAt(moji_doko)+'</font>';
				moji_doko++;  color_doko++;
				}
			moji_doko=0;
			color_doko=doko;
			hyouji_moji+='<br>';
			}

		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値を書いてある部分に、色名をお書き下さい。

次に、実際にグラデーションがかかる文字列を指定します。
上から25〜28行目にある

moji[0]="グラデーション文字列だよ。";
moji[1]="2行目なんだよね。";
moji[2]="3行目もあるよ。";

が文字列欄です。
お好きなメッセージをお書き下さい。


文字列を増やしたい場合は、

moji[2]="3行目もあるよ。";

をコピーペースとして、追加して下さい。

その際に、必ず数字の部分を1つずつ増やして下さい。

サンプルで1行増やす場合は以下のようになります。

変更前
moji[0]="グラデーション文字列だよ。";
moji[1]="2行目なんだよね。";
moji[2]="3行目もあるよ。";
変更後
moji[0]="グラデーション文字列だよ。";
moji[1]="2行目なんだよね。";
moji[2]="3行目もあるよ。";
moji[3]="4行目もあるよ。";

同じ要領で、好きなだけ行数を増やして下さい。

反対に、行数を減らす場合は、下から順番に1行ずつ削除して下さい。

例えばサンプルで1行減らす場合は、以下のようになります。

変更前
moji[0]="グラデーション文字列だよ。";
moji[1]="2行目なんだよね。";
moji[2]="3行目もあるよ。";
変更後
moji[0]="グラデーション文字列だよ。";
moji[1]="2行目なんだよね。";

表示される文字の大きさを変更されたい場合、上から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.