スクロール連動アニメーションをCSSで実現するには？Intersection Observerと組み合わせた使い方

スクロールアニメーションをCSSだけで行うのは難しい？

CSSには :hover や @keyframes などのインタラクションが可能な機能がありますが、「要素が画面内に入ったらアニメーションする」という挙動は、CSS単体では難しく、JavaScriptの補助が必要になります。

そこで登場するのが Intersection Observer API。このAPIを使えば、指定した要素がビューポート内に表示された瞬間を検知し、CSSクラスを付けてアニメーションを実行することができます。

Intersection Observerでアニメーショントリガーを制御

まずは基本となるIntersection Observerのコードです。

<!-- アニメーション対象の要素 -->
<div class="box js-scroll-trigger">アニメーションする要素</div>

/* 初期状態：非表示 */
.box {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* 表示状態：アニメーション適用 */
.box.is-animated {
    opacity: 1;
    transform: translateY(0);
}

// JavaScript（Intersection Observer）
const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
        if (entry.isIntersecting) {
            entry.target.classList.add('is-animated');
            // 一度アニメーションしたら監視をやめる
            observer.unobserve(entry.target);
        }
    });
});

// すべてのターゲット要素に対して監視を開始
document.querySelectorAll('.js-scroll-trigger').forEach((el) => {
    observer.observe(el);
});

このように、JavaScriptは単にクラス is-animated を付与するだけ。アニメーション自体はCSSに任せているため、パフォーマンスも良好です。

data属性でアニメーションを柔軟に制御する

複数のアニメーションパターンを使い分けたい場合、 data属性 を活用すると便利です。

<div class="box js-scroll-trigger" data-animation="fade-up">フェードアップ</div>
<div class="box js-scroll-trigger" data-animation="zoom-in">ズームイン</div>

/* フェードアップ */
.box[data-animation="fade-up"] {
    opacity: 0;
    transform: translateY(30px);
}
.box[data-animation="fade-up"].is-animated {
    opacity: 1;
    transform: translateY(0);
}

/* ズームイン */
.box[data-animation="zoom-in"] {
    opacity: 0;
    transform: scale(0.8);
}
.box[data-animation="zoom-in"].is-animated {
    opacity: 1;
    transform: scale(1);
}

JavaScript側は変えずに、HTMLの data-animation 属性とCSSを追加するだけで新たなアニメーションを追加できます。

Intersection Observerの設定を調整して体験を最適化

以下のようにオプションを設定すると、より快適なUXが得られます。

const observer = new IntersectionObserver(
    (entries, observer) => {
        entries.forEach((entry) => {
            if (entry.isIntersecting) {
                entry.target.classList.add('is-animated');
                observer.unobserve(entry.target);
            }
        });
    },
    {
        root: null, // ビューポートを基準にする
        threshold: 0.1, // 10%見えたら発火
        rootMargin: '0px 0px -100px 0px' // 下方向に早めに検知
    }
);

まとめ：CSSアニメーションを最大限に活かすIntersection Observerの活用法

スクロールに連動したアニメーションを実装する際、CSSとIntersection Observerを組み合わせることで、軽量かつ高い表現力を持った仕組みが作れます。以下のポイントを押さえると、より洗練されたアニメーションが実現できます。

• CSSで定義した transition と transform を使ってスムーズな演出を作成
• JavaScriptは class の切り替えに徹し、構造はシンプルに
• data-animation 属性を活用して柔軟な拡張性を確保
• Intersection Observerの threshold や rootMargin で表示タイミングを最適化

今後のフロントエンド開発では「CSSとJavaScriptの役割分担」がますます重要になります。スクロールアニメーションの実装も、その好例といえるでしょう。