ロード時やスクロール時にふわっと表示させるjQuery

投稿日：2019/10/10 ｜最終更新：2019/10/11
JavaScript/jQuery

画面表示時にコンテンツなどをふわっと表示させる最近流行りのやつです。

HTML例

<div id="main">
    <div class="wrap load-fade">
        <h3>ふわっとロード</h3>
        ロード時にフェードインさせるコンテンツ
    </div>
    <div class="wrap load-up">
        <h3>ふわっとロード</h3>
        ロード時にスクロールアップしてくるコンテンツ
    </div>
    <div class="wrap scroll-fade">
        <h3>ふわっとスクロール</h3>
        スクロールするとフェードインするコンテンツ
    </div>
    <div class="wrap scroll-up">
        <h3>ふわっとスクロール</h3>
        スクロールするとスクロールアップしてくるコンテンツ
    </div>
</div>

CSS例

        .scroll-fade{opacity: 0; transition: all 2s/*処理にかかる時間*/;}
        .scroll-up{opacity: 0; transform: translateY(100px)/*スクロールアップする距離*/; transition: all 2s/*処理にかかる時間*/;}
        .scroll-up.done, .scroll-fade.done{opacity : 1; transform : translate(0, 0);}
        .load-fade {opacity : 0; transition : all 2s/*処理にかかる時間*/;}
        .load-up{opacity: 0; transform: translateY(100px)/*スクロールアップする距離*/; transition: all 2s/*処理にかかる時間*/;}
        .load-up.done, .load-fade.done{opacity : 1; transform : translate(0, 0);}

処理にかかる時間は、transitionで設定しています。
スクロールアップする距離は、translateYの数値を書き換えます。
たっぷりスクロールアップさせたい場合、300pxなどに表示すればいいと思います。

jQuery例

    $(function(){
        load_effect();
        $(window).scroll(function (){
            scroll_effect();
        });
    });

    //ふわっとロード
    function load_effect(){
        var tt = $(window).scrollTop();
        var hh = $(window).height();
        $('.load-fade').each(function(){
            var yy = $(this).offset().top;
            if (tt > yy - hh){
                $(this).addClass('done');
            }
        });
        $('.load-up').each(function(){
            var yy = $(this).offset().top;
            if (tt > yy - hh){
                $(this).addClass('done');
            }
        });
    }

    //ふわっとスクロール
    function scroll_effect(){
        var tt = $(window).scrollTop();
        var hh = $(window).height();
        $('.scroll-fade').each(function(){
            var yy = $(this).offset().top+400;//効果発生開始タイミングを操作したい場合は数値を変更する
            if (tt > yy - hh){
                $(this).addClass('done');
            }
        });
        $('.scroll-up').each(function(){
            var yy = $(this).offset().top+400;//効果発生開始タイミングを操作したい場合は数値を変更する
            if (tt > yy - hh){
                $(this).addClass('done');
            }
        });
    }