【jQuery】スクロールして要素が表示されたら処理を実行する

こんにちは、Ryohei（@ityryohei）です！

スクロールして要素が表示されたら何らかの処理をさせる手法は、色々なサイトで見かけますね！画面をスクロールしていくと要素がふわっと表示されたり、横からスライド表示されたり、文字がどん！と大きくなったり、バリエーションは様々です。特に最近は、ユーザーが視覚的に楽しめるようにサイト全体に動きをつけることが多くなっているため、スクロールしてアニメーションを実行する処理の需要は高まっているように感じます。jQueryではプラグインも数多く存在し、それぞれ独自の動きをつけることが可能です。が、今回は簡単な処理を実装するだけになりますので、プラグインを利用せずに、スクロール中に指定した要素が出現したら処理を実行する方法をご紹介したいと思います！

スクロール位置を取得するのに必要な情報

目的の処理を実行するためには下記の情報が必要になります。

スクロール量

スクロール中に指定した要素が表示されたら実行する処理を実装するには、ユーザがどれくらいスクロールしているかを知るためにスクロール量を取得する必要があります。jQueryにはスクロール量を取得するメソッドがありますので、下記のコードを記述してスクロール量を取得します。

$(window).scrollTop();

指定した要素の位置

要素が存在する位置までスクロールしたら何らかの処理を実行するために、要素が存在する位置を取得する必要があります。画面内に要素が存在する位置はoffsetを利用することで取得できます。

$('selector').offset().top;

ウィンドウの高さ

最後にウィンドウの高さになります。これは、画面内のどの位置で処理を実行するかを指定するために必要になります。ユーザのウィンドウの高さは下記のコードで取得することができます。

$(window).height();

これら3つの値を取得することでスクロール中に表示された要素に対して処理をさせることができます。では、実際に処理を実装してみましょう！

スクロールして要素が表示されたら処理を実行する

HTML

HTMLはシンプルです。今回は、elemというclassを持った要素が表示されたら処理を実行させてみます。

<div class="elem"></div>

CSS

CSSでは、elemに簡単なスタイルを定義しています。isAnimateは、elemが画面内に表示されたら追加されるclassになります。

.elem {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 500px auto 0;
  background: rgb(0, 125, 185);
  opacity: 0.1;
  transition: 1s;
  transform: rotate(45deg);
}

.isAnimate {
  opacity: 1;
  transform: rotate(0); 
}

JS

最後にスクリプトです。eachは複数存在するelemを取得するために利用しています。残りは冒頭で解説した通りになりますので、割愛します。(wh / 2)に関しては、要素の頭が画面の真中まできたら処理を実行するために指定しています。可視範囲に入り次第処理したい場合は、値を変えて調整してみてください！

$(window).on('scroll', function (){

  var elem = $('.elem');
  var isAnimate = 'isAnimate';
  
  elem.each(function () {
  
    var elemOffset = $(this).offset().top;
    var scrollPos = $(window).scrollTop();
    var wh = $(window).height();

    if(scrollPos > elemOffset - wh + (wh / 2) ){
      $(this).addClass(isAnimate);
    }
  });

});