【JavaScript】スクロールのアニメーションに最適！Intersection Observerとは？

Intersection Observer（インターセクションオブザーバー）とは、ある要素がビューの中に入ったか、またはビューから外れたかを検知するためのJavaScript APIです。これを利用することで、スクロールに応じたアニメーションや、遅延ロード（Lazy Loading）を簡単に実装できます。

基本的な使い方

1. Intersection Observerの基本構造

// 1. Intersection Observer を作成
let observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            console.log("要素が表示領域に入りました！");
            entry.target.classList.add("visible");
        } else {
            console.log("要素が表示領域から外れました。");
            entry.target.classList.remove("visible");
        }
    });
}, {
    root: null, // ビューポート（デフォルト）
    rootMargin: "0px", // オフセットなし
    threshold: 0.1 // 10%見えたら発火
});

// 2. 監視対象の要素を指定
let target = document.querySelector(".observe-target");
observer.observe(target);

具体的な活用例

1. スクロール時のフェードインアニメーション

HTML

<div class="box observe-target">フェードインする要素</div>

CSS

.box {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.box.visible {
    opacity: 1;
    transform: translateY(0);
}

このコードでは、.box クラスの要素がページ内で表示されると visible クラスが追加され、フェードインアニメーションが実行されます。

2. 画像の遅延ロード（Lazy Loading）

HTML

<img data-src="image.jpg" class="lazy-load" alt="遅延読み込み画像">

JavaScript

let lazyObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            let img = entry.target;
            img.src = img.getAttribute("data-src");
            img.classList.add("loaded");
            observer.unobserve(img); // 一度ロードしたら監視を解除
        }
    });
}, {
    rootMargin: "100px", // 事前に100px手前でロード
    threshold: 0.1
});

// 画像を監視
document.querySelectorAll(".lazy-load").forEach(img => lazyObserver.observe(img));

CSS

.lazy-load {
    opacity: 0;
    transition: opacity 0.5s;
}

.lazy-load.loaded {
    opacity: 1;
}

このコードでは、画像が表示エリアに入ると data-src から src に実際の画像パスが適用され、フェードインしながら表示されます。

Intersection Observerのオプション設定

まとめ

Intersection Observerを使えば、スクロール連動の処理を簡潔に記述できます。特に、

• フェードインアニメーション
• 遅延ロード（Lazy Loading）
• 無限スクロール などの実装に便利です。

適切な threshold や rootMargin を設定することで、よりスムーズなUXを実現できます。