画面に要素が表示されたらアニメーションを動かす方法（JS）

November 29, 2024

URLをコピーしました！

Web制作では、要素が画面内に表示されたタイミングでアニメーションを開始した場面がよくあります。

今回はJavaScriptを使用して、animationプロパティや@keyframesを使用したアニメーション等を、要素が見えた瞬間に動かす方法をご紹介します！

かわてつ

よく使用する開始タイミングの制御です！

コードまとめ

先にコードを記載しておきます！

document.addEventListener("DOMContentLoaded", function () {
  const initializeScrollAnimations = (selector) => {
      const elements = document.querySelectorAll(selector);

      const animationObserver = new IntersectionObserver((entries) => {
          entries.forEach((entry) => {
              if (entry.isIntersecting) {
                  const animatedElement = entry.target;
                  animatedElement.style.animationPlayState = "running"; // アニメーションを開始する
                  animationObserver.unobserve(animatedElement); // 一度だけ動かすように
              }
          });
      });

      elements.forEach((element) => {
          // 初期状態でアニメーションを停止
          element.style.animationPlayState = "paused";
          animationObserver.observe(element);
      });
  };

  // アニメーションを適用したい要素を記載！※アニメーションを付与しているクラスを記入してください！！！
  initializeScrollAnimations("クラス名");
  // ↓↓例
  initializeScrollAnimations(".p-menu .p-cards__item");
  initializeScrollAnimations(".p-thoughts .p-title__wrapper");
  initializeScrollAnimations(".p-thoughts .p-thoughts__content");
});

です！

順に解説します！

コード解説

DOMContentLoaded イベントリスナー

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

ページのHTMLが完全に読み込まれたときに実行されます。

関数を付与

const initializeScrollAnimations = (selector) => { ... }

「initializeScrollAnimations」という任意の関数を置きました。

引数としてCSSセレクター（selector）を受け取り、そのセレクターに該当するすべての要素を対象に設定を行います！

const elements = document.querySelectorAll(selector);

selectorに一致する要素をすべて取得します。

関数の中身について

const animationObserver = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
        if (entry.isIntersecting) {
            const animatedElement = entry.target;
            animatedElement.style.animationPlayState = "running"; // アニメーションを再生
            animationObserver.unobserve(animatedElement); // 一度だけ監視
        }
    });
});

要素がビュー（画面）内に入ったかどうかを監視し、

entry.isIntersecting が true なら、対象要素の animationPlayState を "running" に設定し、アニメーションを再生します。

アニメーション再生後、その要素の監視を停止します（unobserve）。

elements.forEach((element) => {
    element.style.animationPlayState = "paused"; // 初期状態でアニメーションを停止
    animationObserver.observe(element); // 要素を監視
});

各要素のアニメーションを初期状態で「停止」させます。

その後、IntersectionObserver を使用して各要素を監視します。

動かしたいアニメーションのクラスを登録

initializeScrollAnimations(".p-onayami__text");
initializeScrollAnimations(".p-menu .p-cards__item");
initializeScrollAnimations(".p-thoughts .p-title__wrapper");
initializeScrollAnimations(".p-thoughts .p-thoughts__content");
initializeScrollAnimations(".machine-image__wrapper");
initializeScrollAnimations(".p-flow__list");

アニメーションを適用する複数のクラスを登録しています。

ここに記載されているクラス名が画面内に入った時にアニメーションが開始します！