スクロール駆動アニメーションとは？JSなしでスクロールに連動
scroll() と view() タイムラインの使い方
スクロールに応じて要素が出現したり変形するインタラクションはIntersectionObserverやscrollイベントリスナーで実装していました。animation-timelineプロパティとscroll()、view()関数を使えば、純粋なCSSだけで実装できます。
メインスレッドをブロックしないため性能が優れており、プログレスバー、パララックス効果、スクロールベースのフェードインなど様々なパターンに活用できます。
適用方法
1
@keyframesでアニメーションを定義する
2
animation-timeline: scroll()でスクロールコンテナに接続する
3
view()を使うと要素のビューポート進入/退出に連動できる
4
animation-rangeでアニメーション活性区間を細かく調整する
メリット
- ✓ JavaScript依存なしで高性能スクロールアニメーションを実装できる
- ✓ コンポジタースレッドで実行されメインスレッドをブロックしない
デメリット
- ✗ 複雑なスクロールロジックは依然としてJavaScriptが必要な場合がある
- ✗ FirefoxとSafariのサポートが限定的
ユースケース
スクロール進行率を表示する上部プログレスバー
セクションが画面に入る時のフェードインアニメーション適用