スクロールされて表示範囲に入ったら、画像じゃなくてdivがまるごと遅延表示される・・・ってこと？！

2024-12-04

画像を遅らせて表示・・・は今までもやってみたことがありましたが、
div要素ごと表示を遅らせられたら、もうなんでもありなのでは・・・？

と思い、チャッピーに聞きました

はい、可能です！ウェブサイトの要素をスクロールして表示範囲に入ったタイミングで表示させるには、JavaScriptのIntersection Observer APIを使う方法が簡単で効率的です。

APIかぁ・・・

APIに謎の忌避感（知らずにつかっているであろうに）があったけれども、
とりあえず実装してみようかということで・・・

↓html

<div class="hidden-element">表示される要素 1</div>
<div class="hidden-element">表示される要素 2</div>
<div class="hidden-element">表示される要素 3</div>

↓css

.hidden-element {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s, transform 0.6s;
}

.hidden-element.visible {
    opacity: 1;
    transform: translateY(0);
}

↓JavaScript

document.addEventListener("DOMContentLoaded", () => {
    const elements = document.querySelectorAll('.hidden-element');
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
                observer.unobserve(entry.target); // 一度表示させたら監視を解除
            }
        });
    });

    elements.forEach(element => observer.observe(element));
});

↓実装

表示される要素 1

表示される要素 2

表示される要素 3

・・・

表示がはやいなぁ・・・
ゆっくり表示させたいです・・・

はい、可能です！
表示タイミングを1秒遅らせるには、setTimeoutを使用して遅延処理を追加する方法があります。

↓JavaScript

document.addEventListener("DOMContentLoaded", () => {
    const elements = document.querySelectorAll('.hidden-element');
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                if (entry.target.classList.contains('delayed-show')) {
                    // 1秒遅延してクラスを追加
                    setTimeout(() => {
                        entry.target.classList.add('visible');
                    }, 1000); // 1000ミリ秒 = 1秒
                } else {
                    // 即時表示
                    entry.target.classList.add('visible');
                }
                observer.unobserve(entry.target); // 一度表示させたら監視を解除
            }
        });
    });

    elements.forEach(element => observer.observe(element));
});

即時表示される要素 1

1秒後に表示される要素 2

即時表示される要素 3

1秒後に表示される要素 4

遅い！

なので、これを

こうして

こう

まるっとディレイかけて表示さすという・・・

できました・・・

（追記）
ふわっとでてたのをパッと出るようにcssを変えました・・・（opacityだけでコントロール）
あと、遅延を２秒にしました・・・

スクロールされて表示範囲に入ったら、画像じゃなくてdivがまるごと遅延表示される・・・ってこと？！

関連記事