【スクロールくどうアニメーション】
スクロール駆動アニメーション とは？
公開:
💡 スクロールがタイムラインになる、CSSだけのシネマ体験
📌 このページのポイント
- スクロール量をアニメーションの進行度に直結させられる
- animation-timelineプロパティでスクロールコンテナや要素の表示を参照できる
- JavaScriptのIntersection Observerを使わずにCSSだけで実装可能
ひよこ ペンギン先生、スクロールしたらふわっと要素が現れるやつ、あれってどうやって作るの？
ペンギン先生 昔はJavaScriptでスクロール量を監視して、しきい値を超えたらclassを付け替えてアニメーションを動かしてたんだけど、今はCSSだけでできるようになったんだよ。それがスクロール駆動アニメーションだね。
ひよこ CSSだけでできるの？すごいんだね！でも具体的にどんな書き方をするの？
ペンギン先生 ひよこ なるほど！じゃあスクロールバーを動かすとアニメーションが一緒に進む感じなんだね！
ペンギン先生 ひよこ Intersection Observerって聞いたことがあるんだけど、それとは違うの？
ペンギン先生 Intersection ObserverはJavaScriptのAPIで「要素が画面に入ったかどうか」を検知するものだよ。スクロール駆動アニメーションはCSSだけで完結するから、Javascriptのコードが増えなくて保守が楽になるんだ。2023年頃からChrome・Safari・Firefoxが対応してきて、実用的になってきたよ。
ひよこ ブラウザの対応が最近進んだんだね！パフォーマンスはどうなの？
ペンギン先生 ブラウザがネイティブに最適化しているから、JavaScriptでスクロールイベントを毎フレーム監視するより軽いんだよ。ただ、CSSの書き方が少し複雑だから、まずは animation-timeline: scroll() から試してみるといいね。
まとめ：ざっくりこれだけ覚えればOK！
📖 おまけ：英語の意味
「Scroll-Driven Animations」 ＝ スクロール駆動アニメーション
💬 scroll（スクロール）とdriven（〜に駆動される）を組み合わせた名前で、スクロールがアニメーションのエンジンになる、という意味だよ