【Intersection Observer】ページのスクロールに呼応して関数を発火する方法

どうもこんにちは。フロントエンド志望のRioです。
皆さんWebサイトを閲覧していてたまにスクロールダウンしたら後から文章や写真などの要素が時間差でスライドインしてきたりフェードインしてきたりするWebサイトを見たことがないでしょうか？

私はまさにそんなおしゃれなWebサイトに憧れまして、自分のポートフォリオサイトにもぜひそのエフェクトを導入したいと思い、やりきりました。
こちらがその導入例です。ご覧ください。

アイテムがスクロールで視界に入るとともに時間差でフェードインしているのがわかるかと思います。

今回はこの、スクロールを検知して監視対象の要素に後からCSSのクラスをつける方法をご紹介したいと思います。

Intersection Observer API

これを実現するためには Intersection Observer（交差監視） というブラウザAPIが必要です。
ブラウザAPIなのですでにブラウザに入っているので呼び出すのは簡単です。

JS

const observer = new IntersectionObserver(callback, options);//　1.
observer.observe(targetElement);// 2.

1.Intersection Observerを作成
callbackには発火させたい関数をいれます。
optionに入れるものは　root element, threshold, rootMargin等がありますが、今回使うのはthreasholdです。

2.この行でオブザーバーにtargetElementを監視させます

以下が実際に私がポートフォリオサイトで使ったコードです。

JS

        const observer = new IntersectionObserver((entries) => {//1.
           entries.forEach(entry => {   //2.
        if (entry.isIntersecting) {     //3.
            entry.target.classList.add("visible"); //4.
        }
        });
        }, { threshold: 0.15 }); //5.

document.querySelectorAll(".fadeInOnScroll").forEach(el => observer.observe(el));//6.

1.まずcallbackには引数としてentriesを与えました。名前は何にせよ、ここには監視される対象の配列が入ります。これはこのAPIの設計上、ここに来るものは監視される対象の配列となっています。

2.entriesにforEachをかけて配列内の全アイテムに適用する関数を書きます。

3.「もし、entryが交差しているならば」（モニターの画面の下淵と対象が交差している）
4.それにクラス「visible」を付与しましょう。
5.対象の体積が15％視界に入っていたらisIntersectingがtrueとなり、if関数が発動します。
6.fadeInOnScrollというクラスを持った要素たちすべてをオブザーバに監視させます。

書くべきコードは以上になります。
これでfadeInOnScrollというクラスを持った要素たちは全て監視対象になります。
この要素たちがまだ画面外にいる場合は「視認性0%」です。ですがこれがスクロールして画面の視界の中に入ります。「視認性15％」（要素の面積が15％画面内に見えている）になったときに関数が発火され、クラスが付与され、transitionによる遷移アニメーションが発動する　という仕組みです。

CSS

.fadeInOnScroll {
  opacity: 0;
  transform: translateX(-15%) scale(0.8);
  transition:
    opacity 1.2s ease,
    transform 1.2s ease;
}

.fadeInOnScroll.visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}

以上になります。ちゃんと伝わったかどうかは自信がありませんが、以上わたくしRioによるIntersection Observerを使ったスライドインエフェクトの実装方法でした。