#はじめに
Webサイトのホームページでよくあるスクロールしたときに要素がフワッと表示されるアニメーションをjQueryで実装するにはどうしたら良いかを復習。
#アニメーションのロジック
実際にスクロールした量と画面のトップから特定要素までのオフセットをjQueryで取得。
「スクロールした量 > 特定の要素までのオフセット」のときにaddClassやfadeInなどでアニメーションを実行。
最後にブラウザの高さを取得すればアニメーション完成です。
#ソースコード
index.js
$(function(){
var offset = $('特定の要素').offset().top;
var height = $(window).height();
$(window).scroll(function () {
if ($(this).scrollTop() > offset - height) {
// アニメーションを実行
}
});
}
#感想
何度もググるくらいなら自分で記事を書いて忘れたときに読み直せるようにしたほうが良いと思い、まとめました。
明日も記事更新頑張ります。