【JavaScript】スクロールしたら出てくるアニメーション(scrollイベント)の作成方法

2022年5月5日JavaScript

JavaScriptのscrollイベントを使ってスクロールしたら出てくるアニメーションを作成する方法を紹介します。

スクロールしたら出てくるアニメーションのデモ

See the Pen
スクロールアニメーション(scrollイベント) by Sosak (@Sosak2021)
on CodePen.

JavaScriptのコードと説明

window.addEventListener("load", () => {
  // boxをすべて取得
  const boxes = document.querySelectorAll(".box");
  // scrollイベントをセット
  window.addEventListener("scroll", showBoxes);
  // ロードのタイミングで一度発火
  showBoxes();

  function showBoxes() {
    // 発火位置
    const triggerBottom = (window.innerHeight / 5) * 4;

    boxes.forEach((box) => {
      // boxの頭部分の座標を取得
      const boxTop = box.getBoundingClientRect().top;

      // boxの頭部分が発火位置を超えたら
      if (boxTop < triggerBottom) {
        box.classList.add("show");
      } else {
        box.classList.remove("show");
      }
    });
  }
});

まず、写真がロードされたあとに、scrollイベントを発火させたいので、
windowにloadイベントをセットします。
そして、boxクラスを取得して、windowにscrollイベントをセットします。
scrollイベントにセットした関数showBoxes()では、
まずは発火させたい位置の取得をして、その位置が各要素の頭の部分を越えたらクラスを付与します。
越えない場合、付与したクラスを取り除くことで、scrollイベントを繰り返すことができます。

スクロールの監視は、intersection observerでも可能です。IntersectionObserverAPIの使い方も合わせて確認してみてください。