I'll be NET 】創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)

トップページ > JavaScript/jQuery > ロード時やスクロール時にふわっと表示させるjQuery

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

ロード時やスクロール時にふわっと表示させる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');
            }
        });
    }

まとめ

ロード時やスクロール時の画面効果はゆったりした穏やかな印象を与えます。
効果的に使っていきたいですね。

記事移動

関連記事

HTML上の要素の位置を変更するjQuery

HTML上の要素の位置を変更するjQuery

JavaScriptで現在のURLを取得する方法

pixiv小説のように縦書き表示する方法-2019版

pixiv小説のように縦書き表示する方法-2019版

facebookページの投稿一覧をGraphAPIとjQuery(json)で表示してみる

jQueryで特定のパラメータの値を取得する関数

jQueryで特定のパラメータの値を取得する関数

jQueryでページ内リンクをスムーススクロールさせる方法

jQueryでページ内リンクをスムーススクロールさせる方法

Comment Form

  • コメントを入力してください。
登録フォーム
Name
Mailaddress
URL
Message
Postkey
(スパム対策に、投稿キー を半角で入力してください。)

ユーティリティ

創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)【I'll be NET】

プロフィール

author:I'll be NET

since:2014.01.01

東京都を拠点としたSOHO(フリーランス)による創作サイト向けWEB制作サービスを行っています。 お仕事とか創作活動とかでメモっておきたいこととかを掲載しています。

more

Feed