jQuery、スクロールでアニメーションを発火 #JavaScript

jQueryでパララックスアニメーションをやりたい！！！

パララックス＝視差効果
スクロールに応じてアニメーションが動いたり、背景固定でウィンドウがスクロールされてくる、などのエフェクトのことを言います。

今回は、スクロールされたタイミングでアニメーションを発火させる方法についてです。

方法

まずベースとなる「ブザウザで現在表示されている画面の高さ(=縦幅)」を取得しましょう。

let windowSize = $(window).height(); //<- 画面の縦幅

スクロールのタイミングとアニメーションを合わせるには、
この発火させたいアニメーションのある要素のTopの高さから、
windowSizeを引いた値を基準にします。
(=jQueryのscrollTopが取得する値はブラウザ画面の一番上端を0とするので、ブラウザ画面の高さを差し引いてあげないと要素が画面の上部を超えたときに発火してしまう）

この基準を、スクロールの位置が超えた時点でアニメーションを発火させてやりましょう。
具体的には、次のようにします。

let windowSize = $(window).height(); //<- 画面の縦幅

// スクロールされるたびに発火する
$(window).scroll(function() {
    // 以下の処理で、現在のスクロール位置を求める
    let scrollPosition = $(this).scrollTop();
    // .offset().topでその要素がある位置を求めます。
    if (scrollPosition > $('要素名').offset().top - windowHeight) {
        // スクロール位置がアニメーションしたい要素の位置を超えたタイミングで、発火！
        $('要素名').addClass('アニメーションのClass名');
    }
}

あとはこれを応用して、同一のアニメーションなら配列に入れてそれをforeachでぶん回したり、

let windowSize = $(window).height(); //<- 画面の縦幅

// 同じアニメーションを適用させるのを配列に入れて
let fadeInAnimation = [
    '.className1',
    '.className2',
    '.className3 a',
    '.className4',
    '.className5.className6',
    ]

// あとは同じやり方
$(window).scroll(function() {
    let scrollPosition = $(this).scrollTop();
    //forEachで配列を回してあげる
    fadeInAnimation.forEach((className) => {
        // 今回はthisでその個々の要素を取得する
        if (scrollPosition > $(this).offset().top - windowHeight) {
        $(this).addClass('アニメーションのClass名');
        }
    });
}

forEachの対象を配列じゃなくてhtml要素のlistとかでも同じ感じにできます。

初回読み込み時にも発火させたい！

上記のやり方だと、そもそもの発火条件がスクロールしたタイミングなので、
ロードした時点でもう画面にアニメーションさせたい要素が入っていた場合対応できない…

初期に読み込ませる要素がすでにわかっていれば、単純に

if (windowHeight > $('Classとかの要素名').offset().top) {
    $('Classとかの要素名').addClass('アニメーションのClass名');
}

これでいいけど、例えば対応ブラウザの画面サイズが複数あるとか、
真ん中くらいでリロードされたとき、それ以前のアニメーションは発火されて欲しいとか。

そういう場合は、もうJS側で勝手にスクロールさせちゃいましょう。

// 1pxだけ下に自動スクロールさせる。これを読み込み時に走らせてやればいい
$(this).scrollTop(-1);

以上、スクロールでアニメーションを発火させる方法でした！