本文へスキップ

スクロールアニメーション

スクロールに連動して動き出す。

スクロールで画面に入った要素を動かす基本形のカテゴリ。フェードイン、スタッガー、数字カウントアップ、1文字ずつの出現、クリップによる開き、背景色のシフト、読み進めた割合を示す進捗バー、そして JS を使わない CSS スクロール駆動アニメがある。原則はプログレッシブ・ディスクロージャ。読み進めるのに合わせて要素を現すことで、1画面に一度に出る情報量を抑え、視線を今読む場所に留める。逆に言えば、見せる順番に意味がない要素まで動かすとただ遅くなるだけなので、どこに使い、どこに使わないかを決めるために引く。

関わる原則: プログレッシブ・ディスクロージャ8件

使い分け基本は fade-in-up、カード並びは stagger-reveal、実績の数字は count-up。長い記事には scroll-progress。画像の登場は clip-reveal。まず css-scroll-driven で JS なしに済むかを確かめ、届かない範囲だけ IntersectionObserver 系を使う。

まず見る3件

  • スクロール

    フェードイン出現

    Scroll Reveal (Fade In Up)

    画面に入った要素がふわっと下から浮かび上がる。IntersectionObserverの基本形。

    • threshold 0.2 で発火する。1.0（全体が見えてから）だと下端の要素がいつまでも出ず、0 だと 1px 見えた瞬間に動いて気づかれない
    • 上昇量は 30px・600ms。移動が大きいと「飛んでくる」印象になり、読み始めの位置が定まらない
    • 一度 visible にしたら戻さない。スクロールを戻すたびに消えると、読み返しのたびに待たされる
    • JS
    コードを見る →
  • スクロール

    スタッガー出現

    Staggered Reveal

    複数の要素が少しずつ時間をずらして現れる。リストやカード並びに躍動感が出る。

    • 遅延は 120ms 刻み。4 件で最後が 360ms 後に動き出す。60ms 以下だと一斉に見え、200ms 以上だと最後を待たせる
    • 監視するのは ul 1 つで、li ごとには observe しない。リスト全体が 30% 見えたら順に出すほうが、並びの流れが揃う
    • 移動は左から 24px。上下に動かすとスクロール方向と混ざり、順序の遅延が「引っかかり」に見える
    • JS
    コードを見る →
  • スクロール

    CSSスクロール駆動アニメ

    CSS Scroll-Driven Animations

    JavaScript無しでスクロール連動。新CSSの animation-timeline で、上部に進捗バー(scroll())、各行は画面に入るとふわっと出現(view())。

    • animation-range: entry 0% cover 35% で「入り始めから 35% 見えるまで」に出現を割り当てる。cover 100% だと読める頃には通り過ぎている
    • 時間でなく位置に連動するので、戻すと消える。一度出したら戻したくない出現には向かず、IntersectionObserver を使う
    • 進捗バーは scroll(nearest) で最寄りのスクロール容器に結ぶ。ページ全体なら scroll(root)
    • CSSのみ
    • Scroll-driven CSS
    コードを見る →

使い分け表

パーツ操作技術向く場面状態
フェードイン出現
Scroll Reveal (Fade In Up)
スクロールJS長いページで各セクションの登場を示す・画面に入った要素だけを動かしたいときdefault
スタッガー出現
Staggered Reveal
スクロールJSカード並び・特徴リストの登場・並びの順序を意識させたい一覧default
数字カウントアップ
Count Up Animation
スクロールJS導入社数・DL 数など大きさが説得材料の実績・統計セクションの見せ場default
スクロール進捗バー
Reading Progress Bar
スクロールJS長い記事・規約で残量を示す・数画面ぶんの縦長ページdefault
1文字ずつ出現
Per-Character Text Reveal
スクロールJSヒーロー見出しの登場・短いキャッチコピー（10 文字前後）default
クリップreveal
Clip-Path Image Reveal
スクロールJS写真・ビジュアルの上質な登場・画像を左から右へ「開く」見せ方default
背景色シフト
Scroll-Linked Background Color
スクロールJS章ごとに場面が変わる物語性のある LP・セクションの切り替わりを全画面で示すdefault
CSSスクロール駆動アニメ
CSS Scroll-Driven Animations
スクロールCSSのみ / Scroll-driven CSSJS を書かずに進捗バーと出現を付けたい・スクロール量に線形連動させたい演出default

すべての見本（8件）

  • スクロール

    フェードイン出現

    Scroll Reveal (Fade In Up)

    画面に入った要素がふわっと下から浮かび上がる。IntersectionObserverの基本形。

    • JS
    コードを見る →
  • スクロール

    スタッガー出現

    Staggered Reveal

    複数の要素が少しずつ時間をずらして現れる。リストやカード並びに躍動感が出る。

    • JS
    コードを見る →
  • スクロール

    数字カウントアップ解説あり

    Count Up Animation

    画面に入ると数字が0から目標値へ駆け上がる。実績や統計の見せ場に。

    • JS
    コードを見る →
  • スクロール

    スクロール進捗バー解説あり

    Reading Progress Bar

    ページ上部のバーが読み進めた割合を示す。長い記事で残量がわかって安心。

    • JS
    コードを見る →
  • スクロール

    1文字ずつ出現

    Per-Character Text Reveal

    見出しの文字が1つずつ波打つように現れる。ヒーロー見出しのインパクトに。

    • JS
    コードを見る →
  • スクロール

    クリップreveal

    Clip-Path Image Reveal

    画面に入ると画像が左から右へ開くように現れる。clip-pathを使った上質な登場。

    • JS
    コードを見る →
  • スクロール

    背景色シフト

    Scroll-Linked Background Color

    スクロールでセクションに入るたび背景色が滑らかに切り替わる。物語性のあるLPに。

    • JS
    コードを見る →
  • スクロール

    CSSスクロール駆動アニメ

    CSS Scroll-Driven Animations

    JavaScript無しでスクロール連動。新CSSの animation-timeline で、上部に進捗バー(scroll())、各行は画面に入るとふわっと出現(view())。

    • CSSのみ
    • Scroll-driven CSS
    コードを見る →