⛳

Intersection Observerを使ったフェードインアニメーションの作り方

2023/06/11に公開

CSS

結論

初心者の某付録的な物なので、暖かい目で見ていただけると幸いです。
完璧に理解できている訳ではないので、何かご意見あればコメントお願いします。🙇‍♀️

// フェードインさせたい対象を取得
const boxes = document.querySelectorAll("#fadein");

//オプション設定
const options = {
  root: null, // ビューポート = 見ている画面との交差監視を有効
  rootMargin: "-50% 0px", // ビューポートの中心を判定基準にする
  threshold: 0, // 閾値は0
};

// 第一引数にはフェードインした時に発火させる関数、第二引数にはオプションを記載
const observer = new IntersectionObserver(fadein, options);

// それぞれのboxを監視対象にする
boxes.forEach((box) => {
  observer.observe(box);
});

function fadein(entries) {
// entriesにIntersectionObserverからもらった監視対象を入れて
  entries.forEach((entry) => {
    // 監視対象の要素が交差しているかどうかを判定
    if (entry.isIntersecting) {
    //trueならentry.targetつまりboxにactiveclassを追加
      entry.target.classList.add("active");
      console.log("発火");
    }
  });
}

css

.fadein--img {
  width: 80vw;
  height: auto;
  transform: translateY(50px);
  opacity: 0;
  transition: 1s;
  img {
    width: 100%;
  }
}

.active {
  transform: translateY(0px);
  opacity: 1;
}

html

<div class="fadein--img" id="fadein">
　　<img src="./img/img01.jpg" alt="" />
</div>

htmlとcssは必要最低限しか記述していないので(特にhtml)ご注意ください。

参考記事

https://ics.media/entry/190902/

結論

Discussion