スクロールアニメーション
Scroll Animation
別名: スクロールリビール / Scroll Reveal別名: AOS (Animate On Scroll)
ライブデモ
説明
一言で説明
ページをスクロールして要素がビューポートに入ったとき、フェードインやスライドインなどのアニメーションで出現するエフェクト。
いつ使う？
ランディングページや紹介ページで、コンテンツを一度に見せすぎず、スクロールに合わせて段階的に開示していきたいとき。
💡 日常の言い方
「スクロールすると、コンテンツがふわっと現れてくるやつ」
似ている用語との違い
スクロールアニメーション vs パララックス
パララックスは背景と前景の『移動速度の差』で奥行きを表現し続ける。スクロールアニメーションは要素が『ビューポートに入った瞬間』だけアニメーションする。
AIへの指示例
各セクションの要素が、スクロールして画面に入ったときにふわっとフェードインするアニメーションを実装して。Intersection Observer APIを使って。