要素が画面に入ってきたら色々する処理

Javascript版はこちら

jQueryを使用しスクロールしたときに要素が画面内に入ってきたらなにかする処理。

// jQuery
$(window).scroll(function (){
    $('.js-scroll').each(function(){
            
            const targetElement = Number($(this).offset().top);  // ターゲット
            const scroll        = Number($(window).scrollTop()); // スクロール量
            const windowHeight  = Number($(window).height());    // ウィンドウの高さ
            const windowWidth   = Number($(window).width());     // ウィンドウの幅


            // 要素が画面に入ってから着火するまでの余裕高
            let displayPadding = 350; // default

            if ( windowWidth < 600 ) { // break-point
                displayPadding = 150;
            }

            // ターゲットと比較する値をまとめておく
            const flagHeight = scroll + windowHeight - displayPadding;

            if (targetElement < flagHeight){
                // なにかする
                // $(this).addClass('hoge'); // .hogeクラスの追加
                // $(this).removeClass('hoge'); // .hogeクラスの削除
            }
    });
});

ポイント

  • displayPaddingで画面に入ってからの着火タイミングを変更できる
  • ブレイクポイントを設定することでデバイスごとの着火タイミングの設定が可能

使い道

ふわっと出てくるアニメーション

上記コードの例で、.js-scrollに.hogeクラスが付与されたときに要素が下からふわっと出てくるアニメーションの実装ができる。

// SCSS
.js-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: 0.3s;

    &.hoge {
        opacity: 1;
        transform: translateY(0);
        transition: 0.3s;
    }
}

transformを変更することで左右上下反転等様々なアニメーションをつけることができる。

 

他にも色々あると思うので随時追加予定。

Recent Posts

Recent Column