Intersection Observerを使用してウインドウ内に要素が入ったらフェードインして表示させる

こんにちは、ちゃるです😀

今日はIntersection Observerについて調べました。

Intersection Observerは要素と交差したかどうかを判定するクラスです。ウインドウとの交差を判定することで、画面内に入ったかどうかを判定することができます。

このIntersection Observerを使用して、ウインドウ内に要素が入ったらフェードインして表示される処理を書いてみました！

Copy code// フェードインする要素を取得
const fadeInElement = document.querySelector('.fade-in-element');

// Intersection Observerのオプションを設定
const options = {
  root: null,  // デフォルトのビューポートを指定
  rootMargin: '0px',  // 余白を指定
  threshold: 0  // 完全に表示されたら通知を受け取るように設定
}

// Intersection Observerを作成
const observer = new IntersectionObserver((entries, observer) => {
  // 要素が表示されたときの処理
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 要素をフェードインさせる
      fadeInElement.classList.add('fade-in');
      // Intersection Observerを停止
      observer.unobserve(fadeInElement);
    }
  });
}, options);

// Intersection Observerを開始
observer.observe(fadeInElement);

上記のコードでは、最初にフェードインする要素を取得しています。次に、Intersection Observerのオプションを設定しています。ここでは、デフォルトのビューポートを指定し、余白を指定せず、完全に表示されたら通知を受け取るようにしています。

次に、Intersection Observerを作成しています。このとき、要素が表示されたときに実行する処理を登録します。ここでは、要素が表示されたときに、要素に「fade-in」というクラスを追加し、フェードインさせます。次に、Intersection Observerを停止します。

最後に、Intersection Observerを開始します。これにより、要素が表示されたタイミングを検出し、上記の処理を実行するようになります。

ホームページに組み込んで使ってみたいですね😀

サポートをいただいたらスクールに通ったり参考書を買ったりしたいと思います。支援をお待ちしています😀