ホーム > ブログ > javascript > スクロールで要素をふわっと表示！JavaScriptコードを分解して解説

スクロールで要素をふわっと表示！JavaScriptコードを分解して解説

Webページで「スクロールに合わせて要素をふわっと表示させたい」と思ったことはありませんか？
JavaScriptの Intersection Observer API を使えば、スクロール位置に応じて要素を表示することができます。

この記事では、以下のコードを 初心者向けに一つずつ分解して解説 します。

今回のJavaScriptコード

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));
});

1. ページの読み込みが完了したらJavaScriptを実行

document.addEventListener("DOMContentLoaded", function () {

この部分は 「ページのHTMLが読み込まれたら、JavaScriptを実行してください」 という意味です。

💡 なぜ必要？
JavaScriptは通常、HTMLよりも早く読み込まれることがあります。そのため、HTML要素がまだ表示されていない状態でスクリプトを実行すると、エラーになることがあります。
DOMContentLoaded を使うことで、HTMLの読み込みが完了したタイミング でJavaScriptが実行されるようになります。

2. すべての `.fadeIn` クラスの要素を取得

const fadeElements = document.querySelectorAll(".fadeIn");

このコードは HTMLのすべての fadeIn クラスを持つ要素を取得 します。

📝 ポイント

document.querySelectorAll(".fadeIn") を使うと、複数の要素をまとめて取得できます。
例えば、以下のようなHTMLがあると fadeElements には 2 つの要素が入ります。

<div class="fadeIn">1つ目の要素</div>
<div class="fadeIn">2つ目の要素</div>

3. Intersection Observer を作成

const observer = new IntersectionObserver((entries, observer) => {

この部分で Intersection Observer API（交差監視API） を作成しています。
Intersection Observer は 「指定した要素が画面内に入ったかどうか」を検知する機能 です。

📝 簡単に言うと…
スクロールするときに 「要素が見えるようになったら、アニメーションを開始する」 という処理ができます。

4. スクロールで要素が表示されたらクラスを追加

entries.forEach((entry) => {
    if (entry.isIntersecting) {
        entry.target.classList.add("visible"); // クラスを追加してアニメーション開始

この部分は 「監視している要素が画面内に入ったかどうか」をチェック しています。

entries は 監視しているすべての要素の情報が入ったリスト
entry.isIntersecting は 「この要素が画面内に入っているか？」を判断する

💡 何が起きる？

entry.isIntersecting が true の場合 → 画面内に入ったので visible クラスを追加
entry.isIntersecting が false の場合 → まだ画面外にあるので何もしない

5. 一度表示されたら監視を解除

observer.unobserve(entry.target); // 一度表示されたら監視を解除

この行は 「一度表示された要素は、もう監視しなくていいよ！」 という意味です。

💡 なぜ必要？

一度アニメーションが終わった要素をずっと監視していると、無駄な処理が発生 する
画面に負荷がかかるのを防ぐため、一度だけ発火したら監視を解除 するのが効率的

6. 監視の発火条件を設定

}, { threshold: 0.2 }); // 20%表示されたら発火

threshold は 「どれくらい要素が表示されたら発火するか」 を指定します。

0.2 → 要素が 20% 画面内に入ったら発火
0.5 → 50%
1.0 → 100%（完全に画面内に入ったときだけ発火）

💡 ポイント 0.2 にすると、スクロールして要素の ほんの一部が見えた時点 でアニメーションが開始します。

7. 各要素を監視開始

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

これは 取得した .fadeIn の要素を1つずつ監視 する処理です。

.forEach() を使って、 fadeElements の全ての要素に対して observer.observe(el); を実行
これで 各要素ごとに、画面に入るかどうかの監視がスタート！

まとめ

今回のコードを 簡単な流れ にすると…

HTMLが読み込まれたら JavaScript を実行
fadeIn クラスの要素を取得
Intersection Observer で監視を開始
スクロールで要素が見えたら visible クラスを追加
一度表示されたら監視を解除して効率化
監視対象のすべての要素に対して監視を開始

追加：CSSでふわっと表示

このままだと、JavaScriptがクラスを追加してもアニメーションがありません。
CSSで fadeIn クラスが visible になったとき、アニメーションが動くようにしましょう！

@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);
}

おわりに

このコードを使えば、スクロールすると要素がふわっと表示されるアニメーションが簡単に実装できます！
JavaScriptが苦手な方も、一つずつ分解して理解すれば、意外と簡単に使いこなせるようになりますよ！🎉