スクロール出現アニメーション

サンプル

デザイン上の考慮事項

特になし。

実装上の考慮事項

• アニメーションライブラリとして、GSAPを使用しています。（ネイティブのIntersection Observerでも実装は可能ですが、記述が簡単、順番に表示するのが楽（stagger）、デバッグが楽（markers）などの理由でScrollTriggerがおすすめです。）
• JSが読み込まれるまでのチラツキを防ぐため、data-cloakと合わせて使用してください。

アクセシビリティ上の考慮事項

• ユーザーがアニメーションを無効にできるようにしてください（達成基準 2.3.3 インタラクションによるアニメーション (レベル AAA)）
  • この例ではprefers-reduced-motionを参照することで実現しています。
• アニメーションが、読み上げやキーボード操作に影響しないように注意してください。単にopacityを変更すればよく、visibility: hidden;やdisplay: none;にする必要はありません。もしそのように非表示にしてしまった場合、読み上げられなくなったり、キーボード操作で到達不可能になる可能性があります。