【jQuery】（図多め！）スクロール量でアニメーションの開始を制御する方法を解説

2022年10月15日2023年2月17日

Webサイトで、スクロールすることで初めてコンテンツが表示されたりするのをみたことありませんか？

サイトに動きが追加され、見る人の注意を惹くことができます。

このロジック自体は簡単なのですが、サイトの動きのバリエーションを大幅に増やすことができます。

本記事では、スクロールすることによってアニメーションを制御する方法をご紹介していきます！

なにができる？

このページを少し下にスクロールしてみてください。

「ブラウンの四角形」が現れた後、さらにスクロールすると「青い丸」に変化するかと思います。

「これでなにができるん？」となった方もいらっしゃるかと思います。

が、これはページを下にスクロールした時にアニメーションを開始させたい場合に活用することができます。

スクロールすることによってコンテンツや文字が表示されたり、、、など、思い当たるサイトがあるのではないでしょうか？

スクロール量によってアニメーションの開始を制御する

必要な材料

スクロール量によってアニメーションの開始を制御するために必要な材料たちをまずご紹介します。

サイト上部から表示画面上部までの距離
表示画面の高さ
サイト上部から対象要素の上部までの距離

順を追って説明します。

1. サイト上部から表示画面上部までの距離

日本語でくどくど書いていますが、図で表すとここの部分です。

グレーの四角がサイト全体で、オレンジの四角がPC上に表示されている画面です。

画面のスクロール量によって変化する値です。

次の行にスクロール量を表示させてますので、画面をスクロールして数値の変化を体感してみてください。

ここの距離は次のように取得できます。

$(window).scrollTop();

2. 表示画面の高さ

続いては、サイトを閲覧するのに使用しているデバイスによって変化する値です。

ここです。

次の行にお使いのデバイスの表示画面の高さを表示してみます。

先ほどのスクロール量とは違い、スクロールしても値が変化しません。

まあ当たり前のことを粒立てて書いただけなのですが、スクロールしてもデバイスが変わる訳ではないので、この値も変化しません。

この値のこのように取得できます。

$(window).height();

3. サイト上部から対象要素の上部までの距離

最後は、アニメーションのきっかけとなる要素のサイト上部からの距離です。

ここです。

この値もスクロールしても変化しません。

この値は次のように取得します。

<div class="wrap">
    <div class="elm"></div>
</div>

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

ここまでに取得した要素をまとめてみます。

$(window).scrollTop();
$(window).height();
$(‘.elm’).offset().top;

実装

ここまでで取得した情報を使って、スクロール量によるアニメーションのきっかけ作りを実装していきます。

※アニメーションのきっかけとなる要素をここからは単に「要素」と表現いたします。

まず次のような状態を想像してみてください。

「要素の上部が、表示画面の最下部に一致している」

図で表すと次のような状態です。

この状態を、式で表すと次のようになります。

scrollTop + $(window).height() = offset().top

もし、「画面下部が要素の上部にきたらアニメーションを開始したい」となった場合、上記の釣り合い状態が崩れたら瞬間をきっかけにすればできそうな匂いがしませんか、、？

もう少しスクロールした状態を図に表してみます。

要素が完全に画面内に表示された状態です。

この状態を式に表してみます。

scrollTop + $(window).height() >= offset().top

先ほどはイコールで結ばれていたのですが、今回は釣り合いが崩れ不等号になっています。

したがって、この式を満たす瞬間にアニメーションを開始することで、画面を要素の真上までスクロールしたときにアニメーションを開始することができます。

具体的なコードで表現してみます。

<div class="wrap">
    <div class="elm"></div>
</div>

.elm {
    position: relative;
    background-color: brown;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    top: 1000px;
}

.changeColor {
    background-color: blue;
}

$(document).scroll(function() {
    var scroll = $(window).scrollTop();
    var elmPos = $('.elm').offset().top;
    var windowHeight = $(window).height();

    if (scroll+windowHeight >= elmPos) {
        $('.elm').addClass('changeColor');
    } else {
        $('.elm').removeClass('changeColor');
    }
});

要素の真上に画面がきた瞬間に「changeColor」というクラス名を与え、色を変化させています。

また、スクロールするたびに画面と要素の位置関係を判定しなければならないので、$(document).scroll(function() {}); 内に処理を記述しています。

今回は色を変えているだけですが、透明度を0 → 1にして表示させたり、アニメーションを追加したりすることで活用の幅は相当広がると思います。