スクロール出現アニメーション
サンプル
スクロールで出てきます。
ダミーテキスト
ダミーテキスト
ダミーテキスト
ダミーテキスト
ダミーテキスト
ダミーテキスト
ダミーテキスト
ダミーテキスト
- 順番に出てきます
- 順番に出てきます
- 順番に出てきます
- 順番に出てきます
- 順番に出てきます
- 順番に出てきます
デザイン上の考慮事項
特になし。
実装上の考慮事項
-
アニメーションライブラリとして、GSAPを使用しています。(ネイティブのIntersection Observerでも実装は可能ですが、記述が簡単、順番に表示するのが楽(
stagger)、デバッグが楽(markers)などの理由でScrollTriggerがおすすめです。) -
JSが読み込まれるまでのチラツキを防ぐため、
data-cloakと合わせて使用してください。
アクセシビリティ上の考慮事項
-
ユーザーがアニメーションを無効にできるようにしてください(達成基準 2.3.3 インタラクションによるアニメーション (レベル AAA))
-
この例では
prefers-reduced-motionを参照することで実現しています。
-
この例では
-
アニメーションが、読み上げやキーボード操作に影響しないように注意してください。単に
opacityを変更すればよく、visibility: hidden;やdisplay: none;にする必要はありません。もしそのように非表示にしてしまった場合、読み上げられなくなったり、キーボード操作で到達不可能になる可能性があります。