サイトを開いた時にロゴがふわっとフェードインする方法

サイトを開いた時に、いきなりトップページが表示されるのではなく、まずはロゴがふわっとフェードインしてからトップページが表示されるサイトがありますよね。

美容サロンや旅館のサイトでよく使われていて、優しく柔らかい印象を与える効果があり、とてもおしゃれです。

今回は、jQueryを使って真っ白い画面からロゴがふわっと現れ、数秒後フェードアウトされるサイトを作ってみます。

デモページ

まずはデモページでこれから作るサイトを確認します。

デモページ

最初だけふわっとさせて後は何も動かないのもちょっと変なので、その下のコンテンツもふわっとさせました。

サイトを開いた時にロゴがふわっとフェードインする

HTML

まずはHTML。たったの3行でおっけーです。

<div class="logo_fadein">
  <p><img src="img/logo.png" alt=""></p>
</div>

CSS

続いてCSSです。

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

CSSではロゴを真ん中に配置するためのスタイルを書いてあげます。

真ん中配置はいろいろな方法がありますが、今回は上記の方法を採用。

jQuery

まずはライブラリーを読み込まなければ動きません。

<head>内に下記コードを貼り付けます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

次にjsファイルにjQueryを書いていきます。

$(function() {
	setTimeout(function(){
		$('.logo_fadein p').fadeIn(1000);
	},500);
	setTimeout(function(){
		$('.logo_fadein').fadeOut(1000);
	},2500);
});

.logo_fadein pは、0.5（500）秒後に1（1000）秒かけてロゴをフェードイン

.logo_fadeinは、2.5（2500）秒後に1（1000）秒かけて白背景をフェードアウト

もっとゆっくりフェードインしたい、もっとすぐにフェードアウトしたい等あれば、ここの数字をいじってカスタマイズしてください。

setTimeoutは、JavaScriptでfunctionを“何秒後”に実行、といった指定をする時に使います。

これでロゴがふわっと表示され、数秒後にフェードアウトするサイトの完成です。

デモページ