画面が読み込まれた時に、フェードインして表示されるスクリプトです。
より効果的に見せるならバックカラーは白か黒が良いでしょう。
2種類のサンプルがありますので、好みに応じてお使い下さい。
・サンプルを見る
・ソースを保存する (右クリック→「対象をファイルに保存」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
//フェードインの進行を決める早さ
//遅くしすぎるとフェードインに見えなくなる
times=50;
iro="0123456789abcdef";
my_time=0;
kazu=0;
function fade_in()
{
document.bgColor="#"+iro.charAt(kazu)+iro.charAt(kazu)+iro.charAt(kazu)+iro.charAt(kazu)+iro.charAt(kazu)+iro.charAt(kazu);
kazu++;
clearTimeout(my_time);
if(kazu<15)my_time=setTimeout('fade_in()',times);
else document.bgColor="#ffffff";
}
//-->
</script>
</head>
<body onLoad="fade_in();">
</body></html>
[ 解説 ]
黒→白バージョンを使用して、背景を白で使用する場合と、
白→黒バージョンを使用して、背景を黒で使用する場合は
上のソースをそのままコピーペーストで張り付ければOKです。
ですが最終的なバックカラーを変えたい場合は、変更する箇所があります。
黒→白バージョンをご使用の場合は、下から9行目の
「document.bgColor="#ffffff";」の「#ffffff」と書かれた部分に
お好きなカラーを指定して下さい。
白→黒バージョンをご使用の場合は、下から9行目の
「document.bgColor="#000000";」の「#000000」と書かれた部分に
お好きなカラーを指定して下さい。
カラーはRGB指定でもカラーネーム指定でもOKです。
|