animation-on-scroll

スクロール時のアニメーションスキル

ワークフロー

1. アニメーションのスタイル、タイミング、およびアニメーションを一度だけ実行するか、繰り返すかを確認します。
2. キーフレームと JS オブザーバーのスニペット、および適用する正確な Tailwind クラスを提示します。
3. 必要な調整に絞って提案します（threshold、rootMargin、duration、delay、transform／blur の値）。

使用チェックリスト

• キーフレームの後に、<head> 内へ JS スニペットを挿入します。
• 要素にアニメーションクラスと animate-on-scroll を追加します。
• キーフレーム名が Tailwind のアニメーション参照と一致していることを確認します。

IntersectionObserver のトリガー

<script>
  /*
    Sequence animation on scroll when visible. Requires Animation Keyframe. Usage:

    1) Insert this code in the <head> along with the Animation Keyframe code.

    2) Add to Tailwind Classes: [animation:animationIn_0.8s_ease-out_0.1s_both] animate-on-scroll
  */
  (function () {
    // Inject CSS for paused/running states
    const style = document.createElement("style");
    style.textContent = `
      /* Default: paused */
      .animate-on-scroll { animation-play-state: paused !important; }
      /* Activated by JS */
      .animate-on-scroll.animate { animation-play-state: running !important; }
    `;
    document.head.appendChild(style);

    const once = true;

    if (!window.__inViewIO) {
      window.__inViewIO = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("animate");
            if (once) window.__inViewIO.unobserve(entry.target);
          }
        });
      }, { threshold: 0.2, rootMargin: "0px 0px -10% 0px" });
    }

    window.initInViewAnimations = function (selector = ".animate-on-scroll") {
      document.querySelectorAll(selector).forEach((el) => {
        window.__inViewIO.observe(el); // observing twice is a no-op
      });
    };

    document.addEventListener("DOMContentLoaded", () => initInViewAnimations());
  })();
</script>

キーフレーム

<style>
  /*
    Sequence animation intro. Usage:

    1) Insert this code in the <head>

    2) Add to Tailwind Classes: [animation:animationIn_0.8s_ease-out_0.1s_both]
  */
  @keyframes animationIn {
    0% {
      opacity: 0;
      transform: translateY(30px);
      filter: blur(8px);
    }

    100% {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0px);
    }
  }
</style>

Tailwind の例

<div class="animate-on-scroll [animation:animationIn_0.8s_ease-out_0.1s_both]">
  ...
</div>

カスタマイズ項目

• トリガー：threshold と rootMargin を調整して、表示を早めたり遅らせたりします。
• 繰り返し：再び表示範囲に入ったときに再実行するには、once = false に設定します。
• 動き：キーフレーム内の translateY と blur を調整します。
• タイミング：Tailwind のアニメーション値で duration と delay を変更します。

よくある落とし穴

• JS スニペットより前にキーフレームを記述し忘れる。
• Tailwind のアニメーションで指定したものと異なるキーフレーム名を使う。
• オブザーバーの初期化前に要素がすでに表示範囲内にあり、アニメーションが実行されない。

仕様が不足している場合に確認する質問

• アニメーションは一度だけ実行しますか、それとも要素が再び表示範囲に入るたびに実行しますか？
• 要素がビューポートに入る何秒前に開始しますか？
• どのような動きのスタイル（フェード、スライド、ぼかし、拡大・縮小）にしますか？