Intersection Observer APIを使ったスクロールアニメーション

Intersection Observerは「要素間交差の監視」です。任意の要素が、祖先要素やビューポートと交差する変化を非同期で監視します。

Googlebot（Googleのクローラー）もIntersection Observerに対応しています。Googleの公式ブログ⁠（新しいタブで開く）でも、Intersection Observerによる遅延読み込みをサポートしていることが紹介されています。

ここでは、スクロールすると下からふわっと要素が表示される「フェードインアニメーション」を題材にします。

よく見かける、jQueryを使った方法です。スクロールのたびに要素の位置を計算します。

前提としてjQueryが必要なので、読み込む量が増える分、負荷がかかります。

inview.js⁠（新しいタブで開く）などを使った方法もあります。jQueryに加えてプラグインも読み込むので、前述のjQueryを使った方法以上に負荷がかかります。

ここで登場するのが、Intersection Observer APIを使った方法です。下記のスクリプトを流用すれば、ターゲットをいくつ指定しても、すべてに適用されます。

要素が画面に入ったらactiveクラスを付けます。そのあとobserver.unobserve(entry.target);で監視の対象から外すので、アニメーションは1回だけ動きます。

1document.addEventListener("DOMContentLoaded", () => {2  handleScrollIn();3});45const handleScrollIn = () => {6  const targets = document.querySelectorAll(".js-scrollIn");78  const options = {9    root: null,10    rootMargin: "-20% 0px",11    threshold: [0]12  };1314  const callback = (entries, observer) => {15    entries.forEach((entry) => {16      if (entry.isIntersecting) {17        entry.target.classList.add("active");18        observer.unobserve(entry.target);19      }20    });21  };2223  const observer = new IntersectionObserver(callback, options);2425  targets.forEach((target) => {26    observer.observe(target);27  });28};

rootMargin: "-20% 0px"は、判定に使う範囲を画面の上下から20%ずつ内側に狭める指定です。要素が画面の端に入った瞬間ではなく、少し中まで入ってから動きます。

スクロールの行きも帰りも動かしたい場合は、const callback = ～の箇所を下記のように変更します。observer.unobserve(entry.target);を消すと、一度動いたあとも監視が続きます。画面から出たときにactiveクラスを取り除くので、もう一度画面に入ると再び動きます。

1const callback = (entries) => {2  entries.forEach((entry) => {3    if (entry.isIntersecting) {4      entry.target.classList.add("active");5    } else {6      entry.target.classList.remove("active");7    }8  });9};

Intersection Observer APIは、Chrome、Edge、Firefox、Safariなどの主要なブラウザで使えます。

IntersectionObserver | Can I use... Support tables for HTML5, CSS3, etc⁠（新しいタブで開く）

Internet Explorerのサポートが2022年6月に終了し、ポリフィルも不要になりました。スクロールに合わせた処理は、スクロールのたびに位置を計算する方法ではなく、Intersection Observer APIを使うと、パフォーマンスの面で有利です。

• 交差オブザーバー API - Web API | MDN⁠（新しいタブで開く）
• The new evergreen Googlebot | Google Search Central Blog⁠（新しいタブで開く）