スクロール連動アニメーション（スクロールトリガー）

このページの目的

ユーザーがページをスクロールし、特定の要素が画面内に入ってきた瞬間に、フワッと表示されるような「スクロール連動アニメーション」を実装する方法を学びます。
今回は、パフォーマンスに優れたモダンなJavaScriptのAPI「Intersection Observer」を使った、確実な実装方法を紹介します。

---

smart_display動作サンプル

実際に動作するサンプルです。下にスクロールしていくと、各ボックスが順番にフワッと表示されることを確認してください。

このサンプルを実装するためのHTML, CSS, JavaScriptのコードは以下の通りです。

---

code実装コード解説

1. HTMLの構造

アニメーションさせたい要素に、目印となるクラス（例: .animate-on-scroll）を付けておきます。

<div class="scroll-item animate-on-scroll">
  ここにコンテンツ
</div>

2. CSSのスタイル

アニメーションの「実行前」と「実行後」のスタイルを定義します。JavaScriptは、このクラスを付け外しするだけです。

/* アニメーション実行前の初期状態 */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* 画面内に入って is-visibleクラスが付いた後の最終状態 */
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

3. JavaScriptの処理

Intersection Observerを使い、.animate-on-scrollクラスを持つ要素が画面に入ってきたかを監視します。

// scroll-animation.js

const targets = document.querySelectorAll('.animate-on-scroll');

const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        // 画面内に入ったら
        if (entry.isIntersecting) {
            // is-visibleクラスを追加
            entry.target.classList.add('is-visible');
            // 監視を解除
            observer.unobserve(entry.target);
        }
    });
}, { threshold: 0.1 }); // 10%見えたら実行

// 全てのターゲットを監視開始
targets.forEach(target => {
    observer.observe(target);
});

---