ローディング画面作成

ページ読み込み時のローディングアニメーションの実装は簡単です。
当サイトのトップページのロディング画面を作成にも触れつつ、具体的な方法を紹介します。

素材準備

サイト内ですでに使われているものや簡単な画像、もしくはCSSやjavascriptのみでローディングを作る事をオススメします。

動画で作成したり、アニメーションgifなどで実装する事も可能ですが、ローディングに重さのあるコンテンツを置いてもローディングという本来の意味から遠ざかるので、当サイトはCSSとJavascriptだけで実装しています。

当サイト場合は、トップのロゴの背景の雲が流れているものと同じ素材をそのまま使います。
当サイトのトップ背景及びローディングは、背景に雲の画像を３つ並べて横に流しているだけの簡単な作りです。

ローディング画面作成

まず、ローディング画面領域としてbody直下に<DIV>などで、最前表示を作成します。

html

<div id="loader">
ローディング中の内容
</div>

css

#loader {position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;z-index: 10000;}

動作実装

z-indexが効いているので、次の例のようにローディング完了後にローディング画面を消す必要があります。
今回はJavascriptでフェードアウトします。

下の例は当サイトのローディング画面のjavascriptですが、ホームとホーム以外で文字を表示するかどうかを分けています。

Javascript

window.addEventListener("load", function(){
	if(loader = document.querySelector(".home #loader")) {
		loader.style.transition = "opacity 1000ms";
		document.querySelector(".home #loader p").style.display="block";
		setTimeout(function(){loader.style.opacity = 0;}, 4000);
		setTimeout(function(){loader.style.display = "none";}, 5000);
	}else if(loader = document.querySelector("#loader")) {
		loader.style.transition = "opacity 1000ms";
		setTimeout(function(){loader.style.opacity = 0;}, 1);
		setTimeout(function(){loader.style.display = "none";}, 1000);
	}
});