【jQuery】特定の要素までスクロールしたときに要素を表示

はじめに

Webサイトのホームページでよくあるスクロールしたときに要素がフワッと表示されるアニメーションをjQueryで実装するにはどうしたら良いかを復習。

アニメーションのロジック

実際にスクロールした量と画面のトップから特定要素までのオフセットをjQueryで取得。
「スクロールした量 > 特定の要素までのオフセット」のときにaddClassやfadeInなどでアニメーションを実行。
最後にブラウザの高さを取得すればアニメーション完成。

ソースコード

index.js

$(function(){
 var offset = $('特定の要素').offset().top;
 var height = $(window).height();

 $(window).scroll(function () {
   if ($(this).scrollTop() > offset - height) {
      // アニメーションを実行
    } 
 });
}