JSはもういらない？CSSの新境地「Scroll-Driven Animations」をマスターする｜ブログ

はじめに Webサイトのスクロール演出といえば、これまでは JavaScript（IntersectionObserver や scroll イベント）を使うのが当たり前でした。 しかし今、CSSだけで「スクロール量に連動したアニメーション」を実現できる Scroll-Driven Animations という革新的な仕組みが登場しています。 本記事では、この技術の核となる「Scroll Timeline」と「View Timeline」の概念を、 初心者の方にもイメージしやすい形で整理していきます。 1. Scroll-Driven Animations とは？ 一言でいうと、 「アニメーションの進行を「時間」ではなく「スクロール量」に同期させる仕組み」 です。 従来のCSSアニメーション 0秒 → 1秒 → 2秒（自動で進む） Scroll-Driven Animations スクロール 0% → 50% → 100%（ユーザー操作に連動） アニメーションは勝手に進まず、 スクロールした分だけ進み、止めれば止まる── この「完全同期」が最大の特徴です。 これで何ができるようになる？ スクロールに合わせて要素が自然にフェードイン スクロール量に応じた画像の拡大・縮小 縦スクロールに連動したパララックス表現 スクロールを止めると、アニメーションもピタッと停止 まさに 「Webサイト全体を1本の動画のように操る」 感覚をCSSだけで実現できます。 2. 鍵を握る「Timeline（タイムライン）」という考え方 Scroll-Driven Animations を理解するうえで最も重要なのが Timeline（タイムライン） という概念です。 Timeline とは、 アニメーションが「何を基準に進むか」を決めるモノサシ のこと。 | タイムラインの種類 | 基準 | 例 | | --- | --- | --- | | 従来のTimeline | 時間（秒） | animation-duration: 1s; | | Scroll-Driven | スクロール進行度 | ページ全体 / 要素の見え方 | この「基準が時間ではなくスクロールになる」 という発想の転換が、すべての土台になります。 3. Scroll Timeline：スクロール量そのものを測る 概念 ページ全体、あるいは特定のスクロールコンテナの \\「一番上から一番下まで」\\を 0〜100% のタイムラインとして扱います。 イメージ スクロールバー ＝ 動画の再生ヘッド ユーザーがスクロールした分だけ、 アニメーションが 進む・戻る（スクラブ） します。 向いている演出 読了率プログレスバー 背景のパララックス効果 大きなストーリーテリング演出 4. View Timeline：要素の「見え方」を測る Scroll Timeline と並んで、 実務で特に出番が多いのが View Timeline です。 概念 「要素が画面内に入ってから、完全に出ていくまで」 を1本のタイムラインとして扱う スクロール量ではなく、 要素の可視状態そのものが進行度になります。 メンタルモデル ビューポート ＝ ステージ 要素 ＝ 役者 役者がステージに登場し、観客の前に立ち、退場するまで。 その 出演時間そのものがアニメーションの尺 になります。 向いている演出 スクロールに合わせた要素の出現アニメーション セクションごとの情報提示 縦に読み進めるコンテンツ演出 5. 覚えておきたい3つの状態（フェーズ） View Timeline では、 アニメーション範囲を \\「状態」\\で指定します。 | 状態 | 意味 | | --- | --- | | entry | 要素が画面に入り始めた瞬間 | | cover | 要素が画面内に完全に収まった状態 | | exit | 要素が画面から出始めた瞬間 | 重要ポイント これらは pxなどの座標ではありません。 「状態」で指定するため、 画面サイズが変わっても スマホ・PCでも 意図したタイミングが崩れません。 まとめ：Scroll-Driven Animations は「同期」である 最後に、よく混同される概念を整理します。 スクロールトリガー → ある位置でアニメーションを開始（従来のJS手法） スクロール同期 → 常にスクロール量とアニメーションが連動（Scroll-Driven） Scroll-Driven Animations は後者です。 「スクロールという操作を、時間軸として扱う」 それが CSS による新しいアニメーションの思考法です。 おわりに Scroll-Driven Animations を使えば、 これまで JavaScript に頼っていた処理を ブラウザネイティブ（CSS）に任せることができます。 実装はシンプル パフォーマンスも安定 レイアウト変更にも強い 「新しすぎて難しそう」と感じるかもしれませんが、 「スクロールを時間の代わりにしているだけ」 と考えれば、実はとても素直な技術です。