763万 キーワード

2021年 検索パフォーマンス

57.8万 ユーザー

2021年 訪問ユーザー数

WordPressのスキルアップはこちら!▶[click]

【jQuery】要素が画面に入ったタイミングでフェードインしながらふわっと表示させる方法(CSS)

jQuery(ジェイクエリ)
この記事は約6分で読めます。
スキルアップで未来を変える!!
情熱があれば【誰でも】挑戦できます!
ここからSTART↓

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

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

サンプルページ

scroll(fn)イベント

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

scroll(fn) - jQuery 日本語リファレンス
<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軸の距離を格納しています。

<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を使うと、このような表現も簡単に作れるので便利ですね!お試しください😃

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

サンプルページ

Loading
「ワードプレスで未来を変える!」
【未経験挑戦可!】スキルアップしたい!WordPressに挑戦したい!何かに挑戦して人生を変えたい!!という方をお待ちしています↓↓
jQuery(ジェイクエリ)
EGUWEB
タイトルとURLをコピーしました