【JavaScript】Intersection Observer を使ったアニメーション処理の基本形

タグ :

Intersection Observer を使ってスクロールアニメーションを制御する雛形。
覚えておくと、どんな演出でもスムーズに実装でき、テンプレートとして繰り返し使えます。




// 1. 処理内容を定義（コールバック関数）
function callback(entries) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 表示されたときの処理（アニメーションやクラス追加）
    }
  });
}

// 2. IntersectionObserver インスタンスを作る
const observer = new IntersectionObserver(callback, {
  threshold: 0.5, // 50% 表示されたときに反応
});

// 3. 対象要素を監視開始
document.querySelectorAll(".監視対象のクラス").forEach(el => {
  observer.observe(el);
});

この構成を覚えておけば、アニメーションの切り替え／発火条件のカスタマイズ／複数要素対応
など、いろんなケースに応用が効きます。

応用例




if (entry.isIntersecting) {
  entry.target.classList.add("show");
} else {
  entry.target.classList.remove("show");
}




.fade-blur {
  opacity: 0;
  filter: blur(10px);
  transition: all 1s ease;
}

.fade-blur.show {
  opacity: 1;
  filter: blur(0);
}

サンプル

See the Pen
Untitled by ryotom (@ryotam-smoke)
on CodePen.

rootMarginを使い、「少し前から」反応させる

rootMarginは、IntersectionObserver のオプションの1つで、
観測エリア（ビューポート）を仮想的に拡張または縮小するためのプロパティ。

例）rootMargin: “0px 0px -100px 0px” の場合




const observer = new IntersectionObserver(callback, {
  threshold: 0.5,
  rootMargin: "0px 0px -100px 0px"
});




const observer = new IntersectionObserver(callback, {
rootMargin: "上 右 下 左"
              ↑  ↑  ↑  ↑
           top right bottom left

通常のビューポートより下を100px縮めた範囲を、表示エリアとして扱います。
つまり、要素が画面に100px手前で到達したときに反応するようになります。

See the Pen
Untitled by ryotom (@ryotam-smoke)
on CodePen.

前ページに戻る