動くグラデーション文字列です。
設定した色にどんどん変化していきます。
複数行に対応しています。
サンプルのように複数の色味を使ったり、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」の部分をご変更下さい。
|
