【JavaScript】IntersectionObserverでスクロール時に要素をふわっと表示させる方法

スクロールして画面内に入った要素が「ふわっ」と表示される演出は、今や多くのWebサイトで使われています。このような効果は、従来jQueryのscrollイベントで実装されてきましたが、現在はブラウザネイティブのIntersectionObserverを使うことで、より軽量かつ高パフォーマンスで実現できます。

この記事では、IntersectionObserverを使ってスクロール時に要素をふわっと表示する方法を紹介します。

IntersectionObserverとは？
HTMLの準備
CSSでアニメーション定義
JavaScriptでIntersectionObserverを設定
実装のポイント
複数要素にスクロールイベントを設定する方法
まとめ

IntersectionObserverとは？

IntersectionObserverは、指定した要素がビューポート内に入ったかどうかを検出するAPIです。従来のようにスクロールイベントを多用することなく、効率的にDOMの表示状態を監視できます。

HTMLの準備

対象となる要素にクラスを指定しておきます。

<div class="fade-in">コンテンツ1</div>
<div class="fade-in">コンテンツ2</div>
<div class="fade-in">コンテンツ3</div>

CSSでアニメーション定義

初期状態を非表示にし、activeクラスが付いたときにフェードインします。

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.active {
  opacity: 1;
  transform: translateY(0);
}

JavaScriptでIntersectionObserverを設定

JavaScriptで対象要素を監視し、画面に表示されたときにactiveクラスを付与します。

document.addEventListener('DOMContentLoaded', function () {
  const targets = document.querySelectorAll('.fade-in');

  const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('active');
        observer.unobserve(entry.target); // 一度表示されたら監視を解除
      }
    });
  }, {
    threshold: 0.1, // 10%表示されたら発火
  });

  targets.forEach(target => {
    observer.observe(target);
  });
});