【jQuery】画面をスクロールして画面に入った時に画像や要素をふわっと表示させる方法（CSS）

CSSで「要素が画面に入ったタイミングでフェードインしながらふわっと表示させたい」と思ったときに使える方法です。要素をふわっとフェードインさせたいと思ったときには、jQueryを使って表示させることができます。

▶サンプルページはこちら

https://css.eguweb.tech/p046/

css.eguweb.tech

scroll(fn)イベント

「scrollイベント」を使うと、画面がスクロールした際にイベントを実行することができます。

scroll(fn) - jQuery 日本語リファレンス

semooh.jp

<script type="text/javascript">
$(function(){
    $(window).scroll(function (){
      //何かしら実行する
    });
});
</script>

each() メソッド

繰り返し処理を実行するには「each() メソッド」が使えます。

 $(セレクタ).each( function( index, element ){
   // DOM処理
 };

<script type="text/javascript">
$(function(){
    $(window).scroll(function (){
        $('.box').each(function(){
        // 実行内容をここに
    });
});
</script>

each() メソッドは配列の要素でも繰り返し処理が可能です。

$(this).offset().top;

.offset().topは要素の offsetParent ノードの上端からの相対的なy軸の距離を返します。offsettopという変数にスクロールしたタイミングの上端からの相対的なy軸の距離を格納しています。

[rml_read_more]

<script type="text/javascript">
$(function(){
    $(window).scroll(function (){
        $('.box').each(function(){
            const offsettop = $(this).offset().top;
         });
    });
});
</script>

$(window).scrollTop();

$(window).scrollTop(); で画面をスクロールした時のスクロール量を取得しています。縦方向に100pxスクロールすれば変数scrollには100pxが入ります。

<script type="text/javascript">
$(function(){
    $(window).scroll(function (){
        $('.box').each(function(){
            const offsettop = $(this).offset().top;
            const scrolltop = $(window).scrollTop();
        });
    });
});
</script>

$(window).height();

$(window).height();でWindowの高さを取得しています。

<script type="text/javascript">
$(function(){
    $(window).scroll(function (){
        $('.box').each(function(){
            const offsettop = $(this).offset().top;
            const scrolltop = $(window).scrollTop();
            const windowHeight = $(window).height();
        });
    });
});
</script>

$(this).addClass(”);

$(this).addClass(‘active’);で「active」クラスを追加しています。スクロールする度に、画面内に要素が入ればactiveクラスを追加しています。

<script type="text/javascript">
$(function(){
    $(window).scroll(function (){
        $('.box').each(function(){
            const offsettop = $(this).offset().top;
            const scrolltop = $(window).scrollTop();
            const windowHeight = $(window).height();
            if (scrolltop > offsettop - windowHeight){
              $(this).addClass('active');
            }
        });
    });
});
</script>

if (scrolltop > offsettop – windowHeight){ で、画面内に要素が入ったタイミングでクラスを次々に付加しています。もう少し遅いタイミングで表示させたい場合は、if (scrolltop > offsettop – windowHeight +400){ といった感じで値を増やしてあげてスクロールがより下に下がったタイミングで条件に当てはまるようにしてあげれば、表示されるタイミングが遅くなっていきます。

まとめ

これで要素が画面内に入った時に次々に要素が表示されるようになります。jQueryを使うと、このような表現も簡単に作れるので便利ですね！お試しください😃

▶サンプルページはこちら

https://css.eguweb.tech/p046/

css.eguweb.tech