JavaScript：フェードアウトしてメッセージを表示

JavaScriptでCSSのRGB値を白から黒へ変化させていくとフェードアウトを表現できる。
フェードアウトして画面が真っ暗になった後、メッセージを表示するプログラムを作った。

メッセージはランダムで色々と変えてみても面白そうだ。
今回はちょっとホラー風になってしまった。

サンプルを見る

フェードアウトの部分の考え方

例えば、背景色を白にする場合、CSSでは

と色名で記述してもよいし、

とRGBの16進数表記としてもよい。
10進数の0～255の値を使って

としても背景色は白になる。今回はこれを使う。
255の数値部分を変数に置き換えて一定時間後に徐々に減らしていけば自然と黒になる。

実際のプログラム部分

var color = {"red": 255, "green": 255, "blue": 255};

// どんどん画面が暗くなっていく
function goDark(){
	// rgb値を一律に減らしていく（白ー＞黒）
	color.red --; color.green--; color.blue--;
	// rgb値が「0」で終了
	if(color.red < 0){
		console.log("Finished!");
		afterDark();
		return;
	}
	console.log(color.red);
	// 背景色を変更
	bd.style.backgroundColor = "rgb(" + color.red + "," + color.green + "," + color.blue + ")";
	// 10ミリ秒後に再帰
	setTimeout(goDark, 10);
}

red, green, blueの3つのプロパティを持つcolorを宣言しておいて、初期値をそれぞれ255とし、setTimeout関数で10ミリ秒ごとに再帰呼び出ししてデクリメント（1ずつ減算）している。
終了の判定は、color.redが0になったらとしている。実際color.greenもcolor.blueも同じくデクリメントしているので判定は一つで済む。

画面に文字を中央に配置する

今回最後に表示するメッセージをどんな端末で見ても中央に配置したかったので、以下のCSSを使った。

/* コンテンツを中央に配置するための設定 */
html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
html {
	display: table;
}
body{
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

考え方としては、ボックスをtable-cellにするとtext-align:centerとvertical-align: middleの設定で上下左右中央になるという仕組みを利用している。

ソースコード全体