JS不要でスクロール演出を作る：CSSのscroll-driven／scroll-triggeredとAIへの頼み方

2026年10月13日

スクロール演出といえばGSAPやIntersectionObserverが定番でしたが、いまはCSSだけで書ける範囲が大きく広がっています。この記事では、CSSの「スクロール連動アニメーション」と、Chrome 145で入った「スクロールトリガーアニメーション」を整理し、AI（Claudeなど）にどう頼めば崩れにくいコードが返ってくるかをまとめます。

まず整理：スクロール演出は2種類ある

「スクロールに合わせて動く」演出は、実は仕組みが2つに分かれます。AIに指示するときも、どちらを作りたいかを先に決めておくとブレません。

種類	動き方	向く演出	主なプロパティ
スクロール連動（scroll-driven）	スクロール量に応じて進行度が0〜100%で動く。止めれば止まり、戻せば逆再生	パララックス、進捗バー、横スクロールのギャラリー	animation-timeline / scroll() / view() / animation-range
スクロールトリガー（scroll-triggered）	ある位置を越えた瞬間に、通常の時間ベースのアニメーションが再生される	カードのフェードイン、要素のクリップ解除、見出しの出現	timeline-trigger / trigger-scope / animation-trigger

スクロール連動アニメーション：パララックスと進捗表現

MDNのスクロール連動アニメーション解説によると、この仕組みはCSSアニメーションの進行を時間ではなくスクロール位置に結び付けるものです。animation-timeline: view() を指定すると、要素がビューポートを横切る進み具合でキーフレームが動きます。

対応状況について、ある解説記事（Medium/CodeX）は、Chrome・Edge 115+、Firefox 132+、Safari 26で使え、世界の対応率は2026年半ば時点で約84%としています。未対応ブラウザでは animation-timeline が無視されるだけなので、@supports で囲めば元の見た目のまま安全に劣化します。

@supports (animation-timeline: view()) {
  .fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: fade-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fade-in { animation: none; opacity: 1; transform: none; }
}

（上記は前掲のMediumの記事にあるパターンをもとにした簡略例です。）

Webデザインのレイアウトスケッチ — Photo: Rawpixel / CC0 1.0（Openverse経由）

新機能：スクロールトリガーアニメーション（Chrome 145）

Chrome for Developersの解説では、スクロールトリガーアニメーションはChrome 145で入る時間ベースのアニメーションで、特定のスクロール位置を越えたときに再生されます。What’s new in web UIは、これを IntersectionObserver の宣言的な代替と位置づけています。

timeline-trigger：トリガー名と、view() か scroll() を使った発火条件（activation range / active range）を定義する
trigger-scope：トリガー名の有効範囲を決める（スクロール連動の timeline-scope とは別物なので混同注意）
animation-trigger：どのトリガーで再生／逆再生するかを指定する。animation の一括指定より後に書かないと上書きされる

書き方の実例はCyd Stumpel氏のブログにまとまっています。同じトリガーで内側の要素も動かせるため、カードの枠→中身の順に出す、といった重ね演出もJavaScriptなしで組めます。

AIへの頼み方：3D・GSAP系との使い分け

SNSでは「Three.js／React Three Fiberの3DシーンをClaude Codeにスクロール連動で組ませる」「GSAP ScrollTriggerと3D素材を組み合わせる」といった投稿が増えています。3Dやピン留め、複雑なタイムラインはライブラリが得意で、テキストの出現やパララックス、進捗表示程度ならCSSで足ります。軽さと保守性ではCSSが有利です。

やりたいこと	おすすめ	AIへの指示のコツ
見出し・カードの出現	CSS（scroll-triggered）	「JS不使用、animation-trigger使用、@supportsで囲む」と明記
パララックス・進捗バー	CSS（scroll-driven）	「animation-range で開始・終了位置を指定」と伝える
3Dモデルの回転・カメラ移動	Three.js / R3F	スクロール量を0〜1に正規化して渡す設計を頼む
ピン留め・複雑な連続シーン	GSAP ScrollTrigger	セクションごとにタイムラインを分けさせる

そのまま使えるプロンプト例

次のHTMLに、JavaScriptなしでスクロール演出を追加してください。
- 見出しとカードは、画面に入ったらフェードアップ（CSSのanimation-timeline: view()）
- ページ上部に細い進捗バー（animation-timeline: scroll(root)）
- すべて @supports で囲み、非対応ブラウザでは通常表示のままにする
- prefers-reduced-motion: reduce では動きを無効にする
- 使ったプロパティと、対応ブラウザの注意点を最後にコメントで説明する