スクロールするとフワフワ表示されてくるページの作り方

セクション毎にフワフワっと表示させるやつ。

基本的には、
1.アニメーションはCSS3のtransitionで制御する
2.アニメーションの開始トリガーをjsで制御する
で可能になる。

//HTML
<div>
    <section class="fadein">
        <h2>情報設計</h2>
        <p>何かしらの説明文。何かしらの説明文。何かしらの説明文。</p>
    </section>
    <section class="fadein">
        <h2>サイトマップ</h2>
        <p>何かしらの説明文。何かしらの説明文。何かしらの説明文。</p>
    </section>
    <section class="fadein">
        <h2>ワイヤーフレーム</h2>
        <p>何かしらの説明文。何かしらの説明文。何かしらの説明文。</p>
    </section>
</div>
//css
/* 画面外にいる状態 */
.fadein {
    opacity : 0.1;
    transform : translate(0, 50px);
    transition : all 500ms;
    }

/* 画面内に入った状態 */
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
    }

前半ではデフォルト = エフェクトがかかる前の状態を指定。fadeinのclassだけが付与された要素は「透明度が0.1で、下方に50px移動している」状態となっている。本来表示したい位置より50px下で、むっちゃ半透明な状態。

後半ではエフェクト後の状態 = 読ませたい状態を指定。”fadein” と “scrollin” というclassがダブルで加わると「透明度が1で、元の位置に移動している」状態。

で、5行目にいるtransitionで、この間をアニメーションで繋ぐということをやっている。こうしておくと、「scrollinというclassが付いた瞬間にアニメーションが始まる」状態となる。

//js
$(function(){
    $(window).scroll(function (){
        $('.fadein').each(function(){
            var elemPos = $(this).offset().top;
            var scroll = $(window).scrollTop();
            var windowHeight = $(window).height();
            if (scroll > elemPos - windowHeight + 200){
                $(this).addClass('scrollin');
            }
        });
    });
});

参考サイト→海外のウェブサイトでよくみる「要素が画面内に入ったらふわっとフェードインするあれ」の実装方法

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です