さぁ!検索しよう!

主にトップページのファーストビューで使われる、ページの読み込みが完了してから対象の要素をフェードインさせる方法です。

DEMO

ページをリロードすると、ヘッダーと中央のタイトルが順にフェードインしていることが確認できるはずです。

HTMLを書く

始めに以下のHTMLを書きます。

<header id="header" class="header">
    <h1 class="logo">LOGO</h1>
    <nav class="nav">
        <ul class="nav-list">
            <li class="nav-list-item">HOME</li>
            <li class="nav-list-item">ABOUT</li>
            <li class="nav-list-item">CONTACT</li>
        </ul>
    </nav>
</header>
<div class="container">
    <h2 id="title" class="title">Welcome to my website!</h2>
</div>

フェードインさせる要素は#header#titleです。

CSSを書く

次に以下のCSSを書きます。

* {
    box-sizing: border-box;
}

html,
body,
.container {
    height: 100%;
}

body {
    background: #e6e6e6;
    color: #333;
    margin: 0;
}

.header {
    background: #333;
    color: #999999;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    opacity: 0;
    padding: 0 15px;
    transition: all 0.5s ease;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}

#header.active {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.logo {
    margin-right: auto;
}

.nav-list {
    display: -webkit-flex;
    display: flex;
    list-style: none;
}

.nav-list-item {
    padding-left: 30px;
}

.nav-list-item:first-child {
    padding-left: 0;
}

.container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.title {
    opacity: 0;
    transition: all 0.5s ease;
    transition-delay: 0.5s;
    -webkit-transform: translateY(1em);
    transform: translateY(1em);
}

#title.active {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

主にCSSで行っていることは以下の通りです。

フェードインさせる要素の初期状態

フェードインさせる要素の.header.titleは、予めopacity: 0;で透明にしています。

更に、.header上から下へフェードインさせるため、transform: translateY(-100%);で相対位置から100%上へ、.title下から上へフェードインさせるため、transform: translateY(1em);で下へ1文字分の1em移動させておきます。

また、.title.headerよりもやや遅らせてフェードインさせるために、transition-delay: 0.5s;0.5s遅らせています。

フェードインさせるためのクラス

ページ読み込み完了時に.activeクラスが付与されると、それぞれの要素が順にフェードインされます。

JavaScriptを書く

最後に以下のJavaScriptを書きます。

(function() {
    $(window).on('load', function() {
        $('#header').addClass('active');
        $('#title').addClass('active');
    });
})();

JavaScriptで行なっていることは以下の通りです。

ページの読み込みが終わったらフェードイン

loadでページが完全に読み込まれたら、#header#title.activeクラスが付与され、それぞれ順にフェードインされます。

以上で、CSS3+JavaScriptで、ページの読み込み完了時にナビゲーション等をフェードインさせる方法を終わります。