JavaScript サンプル：『画面をフェードインさせてみる１』

● Web覚書トップ > JavaScript サンプル > 『画面をフェードインさせてみる１』

説明

ページを読みこんだときに色々な効果を出すと見る人の目を引きますよね。今回は、画面のフェードインを作ってみます。しかし、このような効果は２度目からは見るのも面倒ですし、嫌がられることもあるので気をつけてください。

実行例

ページを再読込みしてください

コード

var color = "0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F".split(",")
var tmp;
window.document.bgColor = "#000000";
for (index = 0;index < 16;index++) {
	tmp = "";
	for (cnt = 0;cnt < 6;cnt++) { tmp += color[index]; }
	color[index] = "#" + tmp;
}
function setbgColor(index){
	window.document.bgColor = color[index];
	if (index < 15) { setTimeout("setbgColor(" + eval(index + 1) + ")",100); }
}

<BODY onLoad="setbgColor(0);">

解説＆ステップアップ

スタイルシートで背景色を設定している場合は、そちらが有効になり、背景色は変わりません。 (確認IE ver.5.5）。
コード前半は、「color[ ]」という配列を作っているだけです。
<BODY>の「onLoad」イベントで呼び出しているため、この処理は画面の読みこみが終了してから実行されます。したがって、あらかじめ画面の色を黒くしておきます。

動作確認

IE5.0(win)、IE5.5(win)、NN4.7(win)