【javascript】スクロールに合わせてふわっと表示！自然なフェードインアニメーションの実装方法

要素をスクロールに合わせて表示する（フェードインさせる）には、JavaScript（Intersection Observer API） を使うのがシンプルでパフォーマンス的にも優れています。

1. JavaScript（Intersection Observer）を使った方法

document.addEventListener("DOMContentLoaded", function () {
    const fadeElements = document.querySelectorAll(".fadeIn");

    const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach((entry) => {
            if (entry.isIntersecting) {
                entry.target.classList.add("visible"); // クラスを追加してアニメーション開始
                observer.unobserve(entry.target); // 一度表示されたら監視を解除
            }
        });
    }, { threshold: 0.2 }); // 20%表示されたら発火

    fadeElements.forEach((el) => observer.observe(el));
});

2. CSS（フェードイン + ふわっと上がる動き）

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px); /* ふわっと上に */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 初期状態（透明） */
.fadeIn {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* JavaScriptで.visibleクラスが追加されたら発火 */
.fadeIn.visible {
    opacity: 1;
    transform: translateY(0);
}

3. HTML（適用する要素）

<div class="fadeIn">スクロールでふわっと表示される要素</div>

ポイント

1. JavaScriptのIntersection Observer API
   • 画面に要素が 20% 以上表示されたら visible クラスを追加。
   • 一度表示されたら監視を解除（不要な処理を防ぐ）。
2. CSSでフェードイン＆ふわっと上がるアニメーション
   • .fadeIn に opacity: 0; を指定し、最初は透明にする。
   • .fadeIn.visible が追加されたときに opacity: 1; にし、ふわっと表示。

この方法のメリット

✅ JavaScriptの負荷が軽い（スクロールイベントの連続監視より効率的）
✅ 簡単に拡張できる（複数の要素に適用可能）
✅ レスポンシブ対応もしやすい

この方法を使えば、スクロールに合わせて要素がふわっと表示される動作を実装できます！