ローディングアニメーションの実装方法(ロゴ編)

WEBサイトを開くときに発動するアニメーションの実装方法を紹介します。今回はロゴ編です。

デモページ

本題

HTML

<div id="loading">
	<div id="loadingLogo"><img src="ロゴの画像を入れてください" alt="ロゴ"></div>
</div>

<body>の後に追記します。その後ろに、ローディング画面が消えた後のコンテンツのコードが記載されている感じです。
それぞれのid名は自由につけてください。

CSS

/*背景*/
#loading{
	width:100%;
	height:100%;
	background-color:#fff;
	position:fixed;
}
/*ロゴ*/
#loadingLogo{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}

/*背景*/
白色の背景をposition:fixed;で固定させます。

/*ロゴ*/
position:absolute; top:50%; left:50%;で親要素から半分の位置に指定します。

animation01.jpg

そうすると画像の左上が中心になるので、transform:translate(-50%,-50%);で要素の縦と横を半分ずつずらして画像を中心に持っていきます。

jQuery

最後に動きの部分です。

$(window).on('load',function(){
	$("#loading").delay(1200).fadeOut('slow');
	$("#loadingLogo").delay(1000).fadeOut('slow');
});

ローディング画面の消え方を指定します。

.fadeOut('slow')はフェードアウトすることを指しており、'slow'以外にも'normal'、'fast'を指定することができます。

あとは.delay(1200)で動作が完了されるまでの時間を指定することができ、1200=1.2秒です。
つまり今回の場合は、サイトを開いてから背景は1.2秒、ロゴは1秒かけて消えます。

関連記事