画面が読み込まれた時に、フェードインして表示されるスクリプトです。
このバージョンでは、お好きな色でフェードインさせる事が出来ます。
使用する色は、出来るだけ濃度が違うものをご使用下さい。
・サンプルを見る
・ソースを保存する
（右クリック→「対象をファイルに保存」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
//フェードイン開始時の背景色を指定する
start_color="8f7e68";
//フェードイン終了時の背景色を指定する
end_color="f2e2cc";
//フェードインの進行を決める早さ
//遅くしすぎるとフェードインに見えなくなる
times=50;
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)/14);
kazu2=Math.ceil((haji22-haji2)/14);
kazu3=Math.ceil((haji33-haji3)/14);
}
else
{
kazu1=-Math.ceil((haji1-haji11)/14);
kazu2=-Math.ceil((haji2-haji22)/14);
kazu3=-Math.ceil((haji3-haji33)/14);
}
my_time=0;
kazu=0;
function fade_in()
{
if(kazu==0)
document.bgColor=start_color;
haji1+=kazu1;
haji2+=kazu2;
haji3+=kazu3;
start_color=haji1.toString(16)+haji2.toString(16)+haji3.toString(16);
document.bgColor="#"+start_color;
kazu++;
clearTimeout(my_time);
if(kazu<13)my_time=setTimeout('fade_in()',times);
else document.bgColor="#"+end_color;
}
//-->
</script>
</head>
<body onLoad="fade_in();">
</body></html>
[ 解説 ]
上から5行目の「8f7e68」の部分に、フェードインが始まる最初の色を設定してください。
次の6行目の「f2e2cc」の部分に、フェードインが終了する最後の色を設定してください。
それ以外の色は、自動的に算出します。
使用する色は、出来るだけハッキリ違う色をご使用下さい。
近似色を使うと、正常にフェードインできません。
例えば濃い緑色と薄い緑色ならOKですが、薄い緑色と薄い黄緑色ではフェードインが潰れます。
また上から7行目の「times=50;」の数値を書き換えると、
フェードインする早さが変わります。
|
