1. ホーム
2. web
3. CSS Scroll-Driven Animations：スクロールベース効果の未来

JavaScriptスクロールイベントの問題点

スクロールベースの効果は従来、メインスレッドで実行されるJavaScriptのスクロールイベントリスナーに依存しており、ジャンクやフレーム落ちの原因となっていました。パッシブリスナーである程度緩和されるものの、レイアウトスラッシングは解消されません。CSS Scroll-Driven Animationsはスクロール追跡をコンポジッタースレッドに移すことで、JavaScriptを一切使わずにスムーズな60fps効果を実現します。

主要概念

3つのコア概念がこの機能を支えます。scroll-timelineはスクロールコンテナのスクロール位置にアニメーションをリンクします。view-timelineは要素のスクロールコンテナ内での可視性にアニメーションをリンクします。animation-timelineプロパティはアニメーションをいずれかのタイムラインにバインドします。timeline-scopeを使用するとタイムラインをDOMツリー全体で共有できます。

スクロール進捗タイムライン

スクロール進捗タイムラインは、ユーザーがコンテナをどれだけスクロールしたかを追跡します。モダンなアプローチではscroll-timelineショートハンドとインラインのscroll()関数を使用します：

@keyframes fill-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.progress-bar {
  animation: fill-progress linear;
  animation-timeline: scroll();
}

scroll()関数は最も近いスクロールコンテナに無名タイムラインを作成します。名前付きタイムラインを使用する場合は、スクローラーにscroll-timeline-nameとscroll-timeline-axisを設定し、animation-timeline: --my-timelineで参照します。

ビュー進捗タイムライン

ビュータイムラインは、ビューポート内での要素の可視性に基づいてアニメーションをトリガーします。監視対象の要素にview-timeline-nameを設定し、アニメーションをバインドします：

@keyframes fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.reveal {
  animation: fade-in linear;
  animation-timeline: view();
  animation-range: entry 0% cover 50%;
}

animation-rangeプロパティはアニメーションの開始と終了を制御します。範囲名にはentry（要素の出現）、exit（要素の退出）、contain（完全収容）、cover（完全可視）があります。

実践例：読書進捗インジケーター

スクロールに応じて塗りつぶされる固定プログレスバーは、最も実用的なユースケースの一つです：

body {
  scroll-timeline-name: --page-scroll;
}

.progress {
  position: fixed; top: 0; left: 0;
  height: 4px; z-index: 100;
  background: linear-gradient(90deg, #667eea, #764ba2);
  transform-origin: left center;
  animation: fill-progress linear;
  animation-timeline: --page-scroll;
}

ブラウザサポートとプログレッシブエンハンスメント

@supportsを使用したプログレッシブエンハンスメント：

@supports (animation-timeline: scroll()) {
  .progress { animation: fill-progress linear; animation-timeline: scroll(); }
}

まず静的なフォールバックを提供し、対応ブラウザでのみスクロール駆動アニメーションを追加します。

まとめ

CSS Scroll-Driven Animationsはスクロールベースの効果におけるパラダイムシフトです。スクロール追跡をコンポジッタースレッドに移すことで、スムーズなパフォーマンスを保証しながらコードを劇的に簡素化します。ブラウザサポートの拡大に伴い、これらの機能は魅力的でパフォーマンスの高いWeb体験を創出するために不可欠なツールとなるでしょう。