こんにちは。Vierです。

最近のWEBページは、様々なエフェクト（アニメション等の動き）が実装されているページが増えてきましたね。

トップページを開いた問のエフェクトって、言ってみれば、WEBサイトの玄関であり、そのWEBサイトの印象が決まってきます。

今回は、最初にトップページを開いたときに、画面全体が真っ白で、ロゴがフェードで浮かび上がり、数秒後に真っ白の背景とロゴがフェードアウトして、サイトが表示されるような実装を考えてみようと思います。

トップページを開いたときにアニメーションデモ

百聞は一見に如かずということで、まずはデモをご覧ください。

デモを見る

html、css、jQueryの実装

html

index.html<div class="start">
    <p><img src="images/logo.png" alt=""></p>
</div>

htmlは上記の3行のみです。画面全体にbackground: #fff;で表示させるためのdivと、その中にロゴを囲んだコードです。トップページの一番最後（footerの後かbodyの閉じタグの前）あたりに配置しておけばよいかと思います。

css

hoge.css.start {
	background: #FFF;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 9000;
}
.start p {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: none;
	z-index: 9999;
	width: 280px;
}

まず.startのcssは、もともと表示されているページの上に背景白、全画面に表示させて、.startの中のpを親要素を基準として、上下左右中央に配置してあります。

※上下左右中央に配置したコードは、「[CSS]要素を上下左右の中央に配置、最近主流になっている実装方法のまとめ」の記事を参考にさせていただきました。

左右の中央にするのは簡単なcssタグで出来たけど、昔は上下の中央配置（縦位置）は少し複雑なcssコードが必要でしたが、今やcss3になり、cssで実現できることがかなり増えましたので、とても簡単に上下左右の中央配置がとても簡単になりましたね。

jQuery

続いては、jQueryのコードです。jQueryの読み込みは忘れずにしておいてください。

$(function() {
	setTimeout(function(){
		$('.start p').fadeIn(1600);
	},500); //0.5秒後にロゴをフェードイン!
	setTimeout(function(){
		$('.start').fadeOut(500);
	},2500); //2.5秒後にロゴ含め真っ白背景をフェードアウト！
});

こちらも、比較的簡単なコードとなります。

やっていることというと

1. p（ロゴ）を0.5秒後に1.6秒かけてフェードイン
2. .startを2.5秒後にフェードアウト

この2段階のみです。

.startは縦横100%で全画面で表示されていますが、その下には通常のページが表示されていて、フェードアウトさせることで顔を出してくれます。

setTimeoutは、実行を遅らせてくれる便利なコードですね。

デモを見る

あ、ちなみにワードプレスのときは、

// 静的htmlの場合
--------------------
$(function() {
	ここに処理を書く
});
// WordPressの場合
--------------------
jQuery(function($) {
	ここに処理を書く
});

jQueryの呼び出しの仕方がちょっと変わるので、WordPressで実装しようとしたときに動かない場合は、チェックしてみてください。

まとめ

いかがでしたでしょうか？

人も初対面の人と会ったときに第一印象は大事ですが、WEBサイトも最初に印象で見てくれた人の心の残り方が変わってくると思います。

ぜひ試してみてくださいね。