【JavaScript】スクロールするとアニメーションしながら要素を表示する方法

2020.09.08
2022.05.04
JavaScript

JavaScriptのスクロールイベントで、アニメーションしながら要素を表示する方法を知りたい！！

こういった疑問に答えていきます。
本日の内容は下記です。

JavaScriptでスクロールアニメーションを実装する方法
同じ要素が複数ある場合のアニメーション

最近のWebサイトでは、スクロールすると要素がふわっと表示されるサイトが多くなってきています。
あれはJavaScriptのスクロールイベントを使用して実装されています。
JavaScriptのスクロールアニメーションとも呼ばれますが、今回はそちらを実装していきます。

jQueryやプラグインは使用せずに、素のJavaScriptで実装する方法を解説していきますので、参考になればと思います。

では早速やっていきましょう！

1. JavaScriptでスクロールアニメーションを実装する方法
2. 同じ要素が複数ある場合のアニメーション
- 2.1. まとめ

JavaScriptでスクロールアニメーションを実装する方法

今回は、予め用意しておいたHTML・CSS・JSファイルを使用していきます。ファイルはGitHubにアップしておくので、ご自由に活用してください！

では早速、JavaScriptでスクロールアニメーションを実装する方法について解説していきます。実装する内容は下記の通りです。

イベントの設定
スクロール量の取得
要素の取得
取得した要素のtop値の取得 + スクロール量
画面の高さを取得
はみ出させる値（お好みで設定）
条件設定

それでは一つずつ解説していきます。

イベントの設定

今回はスクロールイベントをなので、addEventListenerを使って、スクロールイベントを登録します。

const scrollEvent = function () {
    window.addEventListener("scroll", function () {
        // ここに処理を書いていく
    });
};

scrollEvent();

スクロール量の取得

次に、スクロール量を取得します。取得方法は「window.pageYOffset」で取得できます。これで、スクロールしている間は、常にスクロール量を取得することになります。

const scrollEvent = function () {
    window.addEventListener("scroll", function () {
        // スクロール量の取得
        let scrollValue = window.pageYOffset;
    });
};

scrollEvent();

要素の取得

次に、スクロールアニメーションを設定したい要素を取得していきます。
取得方法は、「document.getElementById」「querySelector」などどれでも構いません。

const scrollEvent = function () {
    window.addEventListener("scroll", function () {
        // スクロール量の取得
        let scrollValue = window.pageYOffset;

        // 要素の取得
        let scrollEle = document.querySelector(".scroll");
    });
};

scrollEvent();

取得した要素のtop値の取得 + スクロール量

要素が取得できたら、次は、要素のtop値を取得します。「getBoundingClientRect().top」で要素のtop値を取得することができます。取得できたら、top値に先ほど取得したスクロール量を足します。
top値はスクロールするたびに変動するので、スクロール量を足すことで、画面の一番上から要素までの距離を固定にします。

const scrollEvent = function () {
    window.addEventListener("scroll", function () {
        // スクロール量の取得
        let scrollValue = window.pageYOffset;

        // 要素の取得
        let scrollEle = document.querySelector(".scroll");

        // 取得した要素のtop値の取得 + スクロール量
        let scrollTop = scrollEle.getBoundingClientRect().top + scrollValue;
    });
};

scrollEvent();

画面の高さを取得

次に画面の高さを取得していきます。どの画面の高さでも対応できるように、ここは必ず設定します。取得方法は「window.innerHeight」で取得します。

const scrollEvent = function () {
    window.addEventListener("scroll", function () {
        // スクロール量の取得
        let scrollValue = window.pageYOffset;

        // 要素の取得
        let scrollEle = document.querySelector(".scroll");

        // 取得した要素のtop値の取得 + スクロール量
        let scrollTop = scrollEle.getBoundingClientRect().top + scrollValue;

        // 画面の高さを取得
        let windowHeight = window.innerHeight;
    });
};

scrollEvent();

はみ出させる値（お好みで設定）

要素が画面下に差し掛かるとアニメーションして表示されるのですが、この表示されるタイミングをここで設定していきます。ここはWebサイトに合わせてお好みで変更してください。
ここでは100と設定しているので、画面下に要素が差し掛かると、そこから100px後に表示されるようにタイミングを調整しています。

const scrollEvent = function () {
    window.addEventListener("scroll", function () {
        // スクロール量の取得
        let scrollValue = window.pageYOffset;

        // 要素の取得
        let scrollEle = document.querySelector(".scroll");

        // 取得した要素のtop値の取得 + スクロール量
        let scrollTop = scrollEle.getBoundingClientRect().top + scrollValue;

        // 画面の高さを取得
        let windowHeight = window.innerHeight;

        // はみ出させる値（お好みで設定）
        let value = 100;
    });
};

scrollEvent();

条件設定

では最後に、表示される条件をif文を使って書いていきます。条件内容は「スクロール量が、(要素のtop値+スクロール量 )ー画面の高さ＋表示されるタイミングを超えたら、要素にクラス名を付けて表示させる」になります。

const scrollEvent = function () {
    window.addEventListener("scroll", function () {
        // スクロール量の取得
        let scrollValue = window.pageYOffset;

        // 要素の取得
        let scrollEle = document.querySelector(".scroll");

        // 取得した要素のtop値の取得 + スクロール量
        let scrollTop = scrollEle.getBoundingClientRect().top + scrollValue;

        // 画面の高さを取得
        let windowHeight = window.innerHeight;

        // はみ出させる値（お好みで設定）
        let value = 100;

        // 条件設定
        if (scrollValue > scrollTop - windowHeight + value) {
            scrollEle.classList.add("js-fade");
        }
    });
};

scrollEvent();

if文の詳しい解説

なぜ「 scrollTop – windowHeight + value 」するかと言うと、下の画像をご覧ください。

画像では見えないのですが、要素が画面一番下にある状態の時のそれぞれの値を確認すると、

スクロール量「282」
要素のtop値「2100 (main領域のtop値+要素のtransformYの合計なので、2000と考えてください)」
画面高さ「1718」
if文のscrollTop – windowHeight + value（ t – 高 + v ）が「482」

になっているのが分かるかと思います。そして、この状態でスクロールを行い、スクロール量が「382(282+value)」になると要素が表示されるようになります。なので、「 scrollTop – windowHeight + value 」と言う設定を行っています。

これで、 JavaScriptでスクロールアニメーションを実装することができました。
次に、同じ要素が複数ある場合どうなるのかを解説していきます。

同じ要素が複数ある場合のアニメーション

同じ要素が複数ある場合は、下のように書きます。

const scrollEvent = function () {
    window.addEventListener("scroll", function () {
        // スクロール量の取得
        let scrollValue = window.pageYOffset;

        // 要素の取得
        let scrollEle = document.querySelectorAll(".scroll");

        // 画面の高さを取得
        let windowHeight = window.innerHeight;

        // はみ出させる値（お好みで設定）
        let value = 100;

        // 条件設定
        for (let a = 0; a < scrollEle.length; a++) {
            // 取得した要素のtop値の取得 + スクロール量
            let scrollTop = scrollEle[a].getBoundingClientRect().top + scrollValue;
            if (scrollValue > scrollTop - windowHeight + value) {
                scrollEle[a].classList.add("js-fade");
            }
        }
    });
};

scrollEvent();

変更する点は、「要素の取得方法」と「取得した要素のtop値の取得 + スクロール量の処理の方法」です。
要素の取得は、「 getElementsByClassName 」か「 querySelectorAll 」で取得します。
そしてtop値を取得する時は、配列なので、for文で要素を出力した後に「 getBoundingClientRect().top 」で取得し、その値にスクロール量を足します。
あとは基本的には同じです。

まとめ

今回は、 JavaScriptでスクロールアニメーションを実装する方法について解説しました。紹介した実装方法以外にも、スクロールアニメーションを実装する方法はいくつかあるかと思いますので、自分にあったものを選びましょう！

では本日は以上になります。

オススメの教材

前の記事
JavaScriptのみでスライダーを実装する方法【コピペOK】 2020.08.21
次の記事
【JavaScript】hover時にマウスカーソルを変更する方法 2020.09.14