JS不要！CSS Scroll-driven Animationsで作る爆速スクロール連動UI

📖 推定読了時間：約5分

Webサイトをスクロールする動きに合わせて、記事の読了インジケーターが伸びたり、画像がふわっとフェードインしたり、背景が立体的に動くパララックス効果――。これまでこうした演出を実装するには、JavaScriptの `window.addEventListener('scroll', ...)` や `IntersectionObserver`、あるいはGSAPやLocomotive Scrollといった外部ライブラリの導入が不可欠でした。

しかし、メインスレッドでスクロールイベントを監視する手法は、処理が重くなるとページのスクロールがガタつく「ジャンク（カクつき）」の最大の温床となっていました。この問題を根本から過去のものにする最新Web標準が、ブラウザの合成スレッドで爆速動作する**「CSS Scroll-driven Animations（スクロール駆動アニメーション）」**です。

なぜJavaScriptではなく「CSS」でスクロールアニメーションを動かすべきなのか？

最大のメリットは**「圧倒的なパフォーマンス」**にあります。JavaScriptでスクロール位置を計算してDOMのスタイルを書き換える場合、ブラウザのメインスレッドでレイアウト再計算や再描画（リフロー/リペイント）が毎フレーム発生し、CPU負荷が急増します。

一方、CSS Scroll-driven Animationsは、ブラウザのコンポジタ（Compositor）スレッドで直接処理されます。メインスレッドが重いJavaScript処理でブロックされていても、スクロールに追従するアニメーションは常に60fps〜120fpsのシルクのような滑らかさを維持できるのです。

ユーザーを惹きつけるマイクロインタラクションのUIデザイン手法や演出ロジックを体系的に深掘りしたいデザイナー・エンジニアには、モダンCSSアニメーションUIインタラクション実践書などを手元に置いておくと、CSSネイティブでどこまで表現できるかの引き出しが一気に広がります。

2つの主要概念：ScrollTimeline と ViewTimeline

CSS Scroll-driven Animationsを理解する上で、鍵となるのが2つのタイムライン仕様です。

1. わずか数行で完成する「ページ読了プログレスバー」

ページ全体のスクロール進捗に連動させる場合、`scroll()` 関数を指定するだけで完了します。

/* 画面上部のプログレスバー */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, #06b6d4, #3b82f6);
  transform-origin: 0% 50%;
  animation: grow-progress auto linear;
  animation-timeline: scroll();
}

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

2. スクロールで画面内に入ると浮かび上がる「ViewProgress」

特定のセクションやカードが画面内に入った瞬間から出る瞬間までをタイムラインにするには、`view()` を使用します。さらに `animation-range` プロパティを使うことで、「画面の下端から入ってきたとき（entry）」や「完全に画面内に収まるまで（contain）」といった細かい開始・終了ポイントも直感的に指定可能です。

.reveal-card {
  animation: fade-in-up linear both;
  animation-timeline: view();
  animation-range: entry 20% cover 40%;
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(50px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

高精細なWebフォントやマイクロアニメーションのフレームレートを肉眼で微調整する制作現場では、広色域と高駆動を両立したコーディング・クリエイター向け4K 144Hz外部モニターなどの作業環境が、ミリ秒単位のトランジション品質を極限まで引き上げてくれます。

まとめ：脱JavaScriptで実現する次世代のWeb表現

Chromium系ブラウザでの先行サポートに続き、SafariやFirefoxでも標準化に向けた実装が加速しているCSS Scroll-driven Animations。

「アニメーション＝重いJavaScript」という固定観念を脱ぎ捨て、ブラウザネイティブの力を最大限に引き出すスマートなコーディングスタイルを、ぜひ次期プロジェクトから取り入れてみてください。