スクロール駆動アニメーションジェネレーターとは
スクロール駆動アニメーションは、時間の代わりにスクロール位置または要素のビューポート位置をアニメーションタイムラインとして使用します。scroll()関数はスクロールコンテナの位置を追跡し、view()関数はビューポート内の要素の位置を追跡します。これにより、読書進捗バー、表示エフェクト、スクロール連動アニメーションを純粋なCSSで実現できます。
クイックアンサー
スクロール駆動アニメーションを使用すると、アニメーションの進行状況をコンテナのスクロール位置に直接リンクでき、スクロールイベントリスナーやJavaScriptベースのパララックスライブラリが不要になります。
Last updated: 2026-05-25
制限事項
- Chrome 115以上とEdge 115以上がスクロール駆動アニメーションをサポートしています。FirefoxとSafariはまだScrollTimeline APIをサポートしていません。
- スクロール駆動アニメーションはWeb Animations APIを使用します。アニメーション状態の定義にはCSS @keyframesが依然として必要です。
- scroll()とview()のタイミング進行状況はスクロール距離によって決定されます。非常に短いコンテンツと非常に長いコンテンツではアニメーションの動作が異なる場合があります。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- タイムラインタイプを選択します。scroll（スクロールコンテナを追跡）またはview（ビューポート内の要素位置を追跡）です。
- 目的のエフェクトに合わせてアニメーション範囲とキーフレームを設定します。
- ツールがアニメーション要素のCSSを生成します。
- CSSをコピーし、スクロール可能なページでテストしてアニメーションを確認します。
主な用途
- ブログ投稿の上部に読書進捗バーを作成する。
- セクションがスクロールして表示されるときにフェードインやスライドアップの表示エフェクトを構築する。
- パララックスやスクロール連動背景アニメーションをページに追加する。