data-anim

トリガー

data-animは4つのトリガータイプをサポートしています。各タブをクリックして動作を確認。

Scroll into view

Default trigger. Animates when the element enters the viewport.

<div data-anim="fadeInUp">...</div>

ビューポート（デフォルト）

要素がビューポートにスクロールインすると、IntersectionObserverでアニメーションします。

<div data-anim="fadeInUp">
  Animates on scroll (default)
</div>

<!-- With custom offset -->
<div
  data-anim="fadeIn"
  data-anim-offset="200"
>
  Triggers 200px into viewport
</div>

ホバー

mouseenterで再生、mouseleaveでリセット。キーボードユーザー向けにfocus-visibleにも対応。

<div data-anim="pulse" data-anim-trigger="hover">
  Hover over me
</div>

クリック

クリックごとに再生。ボタンやトグルに最適。

<button data-anim="bounce" data-anim-trigger="click">
  Click me to bounce
</button>

フォーカス

要素がフォーカスを受け取ると再生。フォーム入力に最適。

<input
  type="text"
  data-anim="pulse"
  data-anim-trigger="focus"
  placeholder="Focus me"
/>

トリガーの組み合わせ

各要素には1つのトリガーのみ。複数のインタラクションにはネストを使用：

<div data-anim="fadeInUp">
  <button data-anim="pulse" data-anim-trigger="hover">
    Interactive button
  </button>
</div>

まとめ

トリガー値ユースケース
ビューポートviewport（デフォルト）スクロール表示
ホバーhoverボタン、カード
クリックclickトグル、確認操作
フォーカスfocusフォーム入力