スクロールアニメーション6選｜CSS・JSの実装パターンと選び方【コピペOK】

スクロールに合わせて要素を動かしたいけれど、フェードイン・順次表示・進捗バー・パララックス・カウントアップ・背景ぼかしと複数のパターンがあり、自分の用途にはどれが合うか分からない、ということはないでしょうか。CSS の新機能で書ける方法と JavaScript で書く方法があるらしいが、どちらを選べばよいか判断軸が見つからないという声もよく耳にします。

この記事では、スクロールアニメーションの代表的な実装パターンを6種類取り上げます。(1) 早見表での全体俯瞰、(2) 選び方フローチャート、(3) 各パターンの概要と動作イメージ・詳しい実装記事への誘導、(4) シリーズ共通の設計ルール、までを1記事で押さえる構成です。

スクロールアニメーション6パターン早見表

まずは6つの実装パターンを一覧で見比べてみましょう。最初に「技術」と「メインカテゴリ」の列で、CSS の新機能で書く派か JavaScript で書く派かを判断できます。次に「主な用途」で自分のやりたいことと照らし合わせ、CSS 新機能系を選ぶ場合は「ブラウザ対応」を確認する流れが効率的です。

パターン名	技術	メインカテゴリ	主な用途	ブラウザ対応	reduced-motion の扱い
フェードイン	Intersection Observer	JavaScript	要素の出現演出	広く対応	即時に最終状態で表示
順次表示（stagger）	Intersection Observer ＋遅延の自動配分	JavaScript	複数要素を時間差で出す	広く対応	即時に最終状態で表示
進捗バー	animation-timeline: scroll() ＋JSフォールバック	HTML・CSS	読了率の表示	CSSは新しめ／JSで全対応	追従は維持・補間だけ切る
パララックス	animation-timeline: view() ＋JSフォールバック	HTML・CSS	奥行き・視差演出	CSSは新しめ／JSで全対応	完全に無効化
カウントアップ	Intersection Observer ＋ requestAnimationFrame	JavaScript	実績・KPI 数値	広く対応	即時に最終値を表示
背景ぼかし	animation-timeline: scroll() × backdrop-filter ＋JSフォールバック	HTML・CSS	背景の装飾演出	CSSは新しめ／JSで全対応	完全に無効化

「ブラウザ対応」列の見方を補足します。フェードイン・順次表示・カウントアップは要素の出現を検知する仕組みが広く対応しているため、ほとんどの環境で動きます。一方、進捗バー・パララックス・背景ぼかしは CSS の新しい機能を使うため、対応ブラウザはまだ新しめです。そのため未対応ブラウザ向けに JavaScript の代替を用意して全対応にします。具体的な対応バージョンは変化が早いので、実装時に最新のブラウザサポート情報を確認するとよいでしょう。

この後の章では、選び方フローチャートで自分のやりたいことに合うパターンに辿り着き、その後で各パターンの概要を確認できる構成にしています。やりたいことから候補を絞ってから概要を読むと、読み進めるコストが下がります。

選び方フローチャート

6パターンのどれを選ぶか迷ったら、次の決定木を「何をしたいか」を起点に上から順に辿ってみてください。スクロールアニメーションは「やりたいこと」が先に決まっているケースが多いため、用途から入るのが選びやすくなります。

何をしたい？
├─ 要素を画面に入ったタイミングで出したい
│   ├─ 1つずつ／単発で出したい → 「フェードイン」
│   └─ 複数の子要素を時間差で順番に出したい → 「順次表示（stagger）」
│
├─ スクロール量そのものを見せたい
│   └─ ページの読了率をバーで表示したい → 「進捗バー」
│
├─ 奥行き・立体感を出したい
│   └─ 背景と前景の速度差で視差を出したい → 「パララックス」
│
├─ 数値を動かしたい
│   └─ 実績やKPIの数字を0から動かしたい → 「カウントアップ」
│
└─ 背景で演出したい
    └─ スクロールに連動して背景をぼかしたい → 「背景ぼかし」

各分岐の判断材料を補足します。

• 出現させたい系（フェードイン / 順次表示）: 要素が画面に入ったことを検知する Intersection Observer を使う JavaScript 実装です。単発の要素ならフェードイン、カード一覧など複数要素を流れるように出すなら順次表示が向いています
• スクロール量を見せたい系（進捗バー）: 読了率は「情報」なので、動きを減らす設定でも追従は残す設計が要点になります
• 奥行き系（パララックス）／背景演出系（背景ぼかし）: どちらも装飾です。CSS の新機能（animation-timeline）で書け、未対応ブラウザには JavaScript の代替を用意します
• 数値系（カウントアップ）: Intersection Observer で発火し、requestAnimationFrame で滑らかに数えるイメージです

6パターンそれぞれの概要

ここからは各パターンの概要を順に紹介します。各セクションでは先頭に動作イメージを置き、「どう動くか」「向いているユースケース」「メリット」「注意点」「詳しい実装記事への誘導」を1セクションで完結させています。コードは載せず、選択判断に必要な情報に絞っています。

フェードイン

スクロールして画面に入った要素が、透明＋少しずれた位置から本来の位置へふわっと出現する動きです。出現方向（上・下・左・右）を属性で切り替えられます。

• 向いているユースケース: カード・リストの段階的な出現／セクション見出しの登場演出／一度だけ表示すれば十分なワンショット表示
• メリット: scroll イベントを毎回計算する代わりに Intersection Observer を使うため軽い／出現方向・遅延を属性だけで切り替えられる
• 注意点: 一度表示したら再生しないワンショット実装が基本／発火タイミング（閾値・余白）の調整が要る場合がある

順次表示（stagger）

グループ内の子要素が、画面に入ったタイミングで時間差（0ms・step・step×2…）で順番に出現する動きです。親に属性を付けるだけで対象を増やせます。

• 向いているユースケース: リスト／カードグループの流れるような出現／グリッドレイアウトの順次表示／テンポ感のある演出
• メリット: 子要素に遅延を手書きしなくても自動で配分される／グループ単位でテンポと方向をまとめて指定できる
• 注意点: 対象は直接の子要素のみ（孫要素は巻き込まない）／要素数が多いと最後の要素の出現が遅くなるためステップ値の調整が要る

進捗バー

ページの読了率（スクロール進捗 0%→100%）に連動して、最上部に固定したバーが左から右へ伸びる動きです。

• 向いているユースケース: 記事・LP の読了プログレス表示／長文コンテンツの読み進め状況の可視化
• メリット: 対応ブラウザでは CSS だけで動く（JS 不要）／読了率を ARIA 属性で支援技術にも伝えられる
• 注意点: 未対応ブラウザ向けに JavaScript の代替を別途用意する／読了率は「情報」なので、動きを減らす設定でも追従は残す設計にする（後述「シリーズ共通の設計ルール」参照）

パララックス

背景レイヤーが前景より遅れて動き、両者の速度差で奥行き（視差）が生まれる動きです。図形だけ・実画像・多層の作り分けができます。

• 向いているユースケース: ヒーロー演出・装飾的な奥行き表現／記事・LP のビジュアル強化
• メリット: 同じ仕組みで図形・実画像・多層を作り分けられる／background-attachment: fixed より対応ブラウザが多い
• 注意点: overflow: hidden を使うと視差が止まる落とし穴がある（overflow: clip で回避）／視差は装飾なので、動きを減らす設定では完全に無効化する

カウントアップ

実績やKPIのカードが画面に入ると、数値が0から目標値へ動き出す動きです。最初は速く、最後はゆっくり減速して着地します。

• 向いているユースケース: 導入企業数・満足度・累計ダウンロード等の実績表示／評価点・スコアの数値演出
• メリット: 桁区切り・小数・接尾辞を自動で整形できる／HTML に最終値を書いておけば JavaScript が動かない環境でも数値が残る
• 注意点: 等幅数字を指定しないとカウント中に桁が左右にブレる／一度数えたら再カウントしないワンショット実装が基本

背景ぼかし

画面に固定した背景がスクロール量に連動して徐々にぼけていく動きです。先頭の1画面分をスクロールし切るとぼかしが最大になり、そのまま保持されます。

• 向いているユースケース: ヒーロー演出（背景ぼかしで次セクションの見出しを引き立てる）／装飾的なスクロール演出
• メリット: 対応ブラウザでは CSS だけで動く（JS 不要）／ぼかしの駆動区間と最終状態を明確に制御できる
• 注意点: ぼかしは装飾なので、動きを減らす設定では完全に無効化する／描画コストがかかるため最適化（contain 等）が要る

シリーズ共通の設計ルール

ここまで紹介した6パターンには、すべてに共通する設計ルールが2つあります。どのパターンを選んでも下記を踏まえておくと、アクセシビリティ・保守性で困ることが少なくなります。

動きを減らしたい人への配慮は3つの考え方で切り替える

OS の「視差効果を減らす」設定（prefers-reduced-motion: reduce）を尊重するのは6パターン共通です。ただし「どう無効化するか」はパターンの性質によって3つに分かれるのが、このシリーズの設計上の核になります。

• (1) 出現演出（フェードイン・順次表示・カウントアップ）→ 即時に最終状態で見せる: アニメーション自体は装飾ですが、要素の位置や数値という「情報」は最終状態で伝わります。だから動きを飛ばして、最終状態（表示済み・目標値）を即座に出します
• (2) 情報提示UI（進捗バー）→ 追従は維持して補間だけ切る: 読了率は「情報」です。バーを消したり満タンで固定したりすると誤った情報になります。そこでスクロール操作に直結する追従は残し、なめらかな補間だけを止めます
• (3) 装飾（パララックス・背景ぼかし）→ 完全に無効化する: どちらも画面酔いを誘発しやすく、止めても情報は欠けません。純粋な装飾なので、動き自体を完全に止めて通常表示にします

一律に止めるのではなく、「情報」か「装飾」かで判断を変える——この3つの考え方こそが、シリーズを通貫する見どころです。

なお、動きを減らす設定は iOS / macOS の「設定 → アクセシビリティ → 動作 → 視差効果を減らす」や、Windows の「設定 → アクセシビリティ → 視覚効果 → アニメーション効果」で有効化できます。前庭感覚障害や乗り物酔いを起こしやすい人にとって、過剰な動きは身体的な不快感を生むため、UI 側での配慮が必要です。

CSS の新機能は「未対応ブラウザ向けの代替」をセットで用意する

進捗バー・パララックス・背景ぼかしの3つは、CSS の新しい機能（animation-timeline）でスクロール連動を書きます。これは対応ブラウザでは JavaScript なしで動く一方、未対応のブラウザもまだあります。

そこでシリーズでは、「CSS が使える環境では CSS で動かし、使えない環境では JavaScript で同じ動きを再現する」二段構えを共通方針にしています。

仕組みはシンプルです。CSS 側は @supports で「この新機能が使えるか」を判定して分岐し、JavaScript 側も同じ条件を判定して、CSS で動く環境では JavaScript を動かさないようにします。これで同じ動きが二重にかかるのを防げます。結果として「最新ブラウザでは軽い CSS だけ」「未対応ブラウザでも JavaScript で動く」を両立できます。

scroll-driven animations（animation-timeline）の対応状況は変化が早いため、実装時は最新のブラウザサポート情報を確認するとよいでしょう。

よくある質問（FAQ）

まとめ

この記事では、スクロールアニメーションの代表的な実装パターン6種類を、早見表・選び方フローチャート・各パターンの概要・共通の設計ルール・FAQ で俯瞰しました。ポイントを整理します。

• スクロールアニメーションには、出現演出・スクロール量連動・数値演出を含めて代表的な6パターンがある
• 選び方の起点は 「何をしたいか」。出現させたいならフェードイン／順次表示、スクロール量を見せたいなら進捗バー、奥行きならパララックス、数値ならカウントアップ、背景演出なら背景ぼかし
• 実装アプローチは大きく2つ。CSS の新機能（animation-timeline）系と JavaScript（Intersection Observer）系で、前者は未対応ブラウザ向けの代替をセットで用意する
• どのパターンでも、動きを減らしたい人への配慮は「出現演出＝即時最終状態 / 情報提示UI＝追従維持 / 装飾＝完全無効化」の3つの考え方で切り替えるのが共通ルール
• 各パターンの詳しい実装は、本記事末尾の関連記事ブロックから個別記事へ進めます

スクロールアニメーションは選択肢が多く、最初に俯瞰しておくと後の意思決定がスムーズになります。本記事の早見表と選び方フローチャートをブックマークしておき、案件やポートフォリオで実装する時の参照点として使っていただければ嬉しいです。

関連記事