現代のウェブサイトでは、スクロールに合わせて要素がアニメーションする演出がよく見られますよね。以前はスクロール位置を細かく計算して実装していましたが、もっと効率的でスマートな方法があるんです。
それが、今回ご紹介するIntersectionObserver APIです。

IntersectionObserver APIとは？

IntersectionObserver APIは、ウェブページ上の特定の要素が、画面内に入ったり出たりするタイミングを「監視」するためのJavaScriptの機能です。

まるで監視カメラのように、指定した要素が画面（または別の指定した領域）に「映り込んだ」ときに、自動で教えてくれるイメージです。
この機能を使えば、スクロールアニメーションでよくある「要素が画面に入ったらふわっと表示する」といった動きを、とても効率的に実現できます。

なぜIntersectionObserver APIを使うべきなのか？

従来のスクロールアニメーションでは、スクロールするたびに要素の位置を計算し、画面内に表示されているかを確認していました。
これは、特に要素が多い場合や頻繁にスクロールされる場合に、ウェブサイトのパフォーマンスを低下させる原因になることがありました。

しかし、IntersectionObserver APIを使えば、そんな心配はいりません。

• パフォーマンスの向上: スクロールするたびに全ての要素をチェックする必要がなくなります。
  要素が画面に入ったとき、まさに「その瞬間」にだけ処理が実行されるので、ウェブサイトの動作が軽快になります。
• コードがすっきり: スクロール位置を常に監視して複雑な計算をする必要がなくなるため、コードがシンプルで読みやすくなります。
• 設定の柔軟性: 「要素が画面のどのくらい入ったらアニメーションを開始するか」など、細かな設定を自由に変更できます。

IntersectionObserver APIを使ったスクロールアニメーションの実装例

実際にコードを見てみましょう。今回は、.js-scroll-itemsというクラスが付いた要素が画面に入ったら、is-showというクラスを追加してアニメーションさせる例です。

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    // 要素が画面に入ったら
    if (entry.isIntersecting) {
      entry.target.classList.add('is-show'); // is-showクラスを追加
      observer.unobserve(entry.target);     // 一度アニメーションしたら監視を解除
    }
  });
});

// 監視したい全ての要素を取得
const targets = document.querySelectorAll('.js-scroll-items');
// 各要素を監視対象に追加
targets.forEach(target => observer.observe(target));

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    // 要素が画面に入ったら
    if (entry.isIntersecting) {
      entry.target.classList.add('is-show'); // is-showクラスを追加
      observer.unobserve(entry.target);     // 一度アニメーションしたら監視を解除
    }
  });
});

// 監視したい全ての要素を取得
const targets = document.querySelectorAll('.js-scroll-items');
// 各要素を監視対象に追加
targets.forEach(target => observer.observe(target));

コードの解説

1. IntersectionObserverの準備: new IntersectionObserver((entries) => { ... })で、監視役となる「オブザーバー」を作ります。このオブザーバーは、監視している要素に変化があったときにentriesという情報を受け取って、その中に書かれた処理を実行します。
2. 変化をチェック: entries.forEach(entry => { ... });で、監視対象の各要素について変化がないかを確認します。 entry.isIntersectingがtrueの場合、その要素が画面（ビューポート）内に表示されていることを意味します。
3. クラスを追加＆監視を終了: 要素が画面に入ったら、entry.target.classList.add('is-show');で**is-showクラスを追加します。これにより、CSSで事前に設定しておいたアニメーションが適用されます。 そして、observer.unobserve(entry.target);で一度アニメーションが始まった要素の監視は解除**します。
   これは、同じ要素に対して何度もアニメーションが実行されるのを防ぎ、無駄な処理を減らすためです。
4. 監視対象の指定: document.querySelectorAll('.js-scroll-items');で、アニメーションさせたい全ての要素（ここでは.js-scroll-itemsクラスを持つ要素）を取得します。
   最後に、targets.forEach(target => observer.observe(target));で、取得したそれぞれの要素を先ほど作ったオブザーバーの監視対象に加えます。

IntersectionObserverのオプションでもっと細かく設定

IntersectionObserverには、監視の仕方を調整できる便利なオプションがあります。

• root: 監視の基準となる要素を指定できます。デフォルトは画面全体（ビューポート）ですが、特定のスクロール可能な領域内での表示・非表示を監視したい場合に便利です。
• rootMargin: rootとの間のマージンを設定できます。
  例えば、「画面に入る少し手前でアニメーションを開始したい」といった場合に役立ちます。
  CSSのmarginプロパティのように"100px 0px"といった形式で指定します。
• threshold: 要素がrootとどれだけ交差したときに処理を実行するかを0から1の間の数値で指定します。
  • 0: 要素が少しでも画面に入ったら実行。
  • 1: 要素全体が画面に完全に表示されたら実行。
  • 0.5: 要素の半分が画面に入ったら実行。

その他の考慮事項

• ブラウザのサポート: ほとんどのモダンブラウザでIntersectionObserver APIはサポートされていますが、古いブラウザに対応する場合はポリフィル（新しい機能を古い環境で使えるようにするプログラム）が必要になることがあります。
• パフォーマンスチューニング: 監視する要素が非常に多い場合でも、IntersectionObserverは効率的ですが、場合によってはオプションの調整や、監視対象を絞るなどの工夫でさらにパフォーマンスを改善できることがあります。

まとめ

IntersectionObserver APIは、スクロールアニメーションをよりスムーズに、そして効率的に実装するための強力なツールです。複雑な計算なしに要素の表示・非表示を検知し、パフォーマンスを向上させながら、より洗練されたユーザー体験を提供できます。