スクロール

• 
  S1固定してぼかしながら写真が切り替わる旅館の客室が朝・昼・夜に切り替わる
• 
  S2縦から横へ流れ出す章立て老舗の100年の沿革が横に流れる
• 
  S3止まって円が広がり、世界が変わる昼はカフェ、夜はバーの店。スクロールで昼から夜へ
• 
  S18ズームスルー（窓に飛び込み次の章へ）住宅会社。外観の窓に飛び込むと室内へ
• 
  S20分割された画面が合わさる・割れる「職人×AI」の協業の告知

重さ →重さ ↓ ↑ 驚き驚き → ほぼ0軽中重 ★★★★★★

S6S14S30 3

S5S8S12S15S24S27 6

S2S4S7S9S13S19S25 7

S1S22 2

S26S28 2

S20 1

S23S29 2

S11 1

S16S21 2

S3 1

S18 1

S10S17 2

作例あり このサイトで動作中 見立てに幅がある（幅の真ん中に置いています） 数字はその升の件数です。押すと、その升の表現だけを下の一覧に出します。 重さ・驚きを付けていない S31 は載せていません

1. S1
   固定してぼかしながら写真が切り替わる

   区画を sticky、重ねた写真を opacity＋blur で切替。CSS だけで可

   重さ 軽〜中 驚き ★2

   参考：scroll-driven-animations.style/demos/image-revealdolsten.com

   作例を動かす
2. S2
   縦から横へ流れ出す章立て

   sticky の枠＋横長の帯を translateX。CSS の scroll() か GSAP pin

   重さ 軽 驚き ★2

   作例を動かす
3. S3
   止まって円が広がり、世界が変わる

   sticky（200〜300vh）＋clip-path:circle(0→150%)

   重さ 軽 驚き ★3

   作例を動かす
4. S4
   マスクが開く（ブラインド・格子・SVG）

   SVG mask の矩形群か clip-path:inset

   重さ 軽 驚き ★2

   参考：spire.com

5. S5
   パララックスの層・列ごとの速度差・深度マップ

   translateY を view() で。深度マップは WebGL

   重さ 軽（深度は重） （深度は重） 驚き ★1〜2

   参考：axelvanhessche.com

6. S6
   行ごとに組み上がる見出し

   SplitText の mask:"lines"。和文は改行位置が端末で変わる

   重さ 軽 驚き ★1 このサイトで動作中各ページの見出し

7. S7
   読んだ所から文字が点灯・ぼかしが晴れる

   文節ごとに opacity を view() で

   重さ 軽 驚き ★2

8. S8
   数字・グラフがスクロールで進む

   @property の整数＋counter()。途中で止まるので再生型が向く

   重さ 軽 驚き ★1〜2

9. S9
   写真が迫る・ヒーローが縮む

   scale を view() で

   重さ 軽 驚き ★2

   参考：krew.chstelladomo.com

10. S10
    コマ送り（Apple 型）

    連番 WebP を canvas に描く。スマホはコマを減らす

    重さ 重 驚き ★3

11. S11
    動画がスクロールで進む

    video.currentTime を連動

    重さ 中〜重 驚き ★2〜3

    参考：makermember.com

12. S12
    固定図が章ごとに切り替わる（スクロールテリング）

    sticky＋IntersectionObserver

    重さ 軽 驚き ★1〜2

    参考：squarekicker.com

13. S13
    スクロールの速さで傾く・伸びる

    速さの差分で skewY。JS が要る

    重さ 軽 驚き ★2

    参考：demos.gsap.com

14. S14
    区画ごとに背景色が切り替わる

    CSS 変数の入れ替え

    重さ 軽 驚き ★1

    参考：finiam.com

15. S15
    SVG の線がスクロールで描かれる

    stroke-dashoffset を view() で

    重さ 軽 驚き ★1〜2 このサイトで動作中各ページの左端の寸法線

    参考：kontenta.ai

16. S16
    3D の物体がスクロールで回る

    Three.js のカメラ・物体を進捗で

    重さ 重 驚き ★2〜3

    参考：seen.space

17. S17
    粒子が集まって文字・形になる

    WebGL 粒子＋進捗

    重さ 重 驚き ★3

18. S18
    ズームスルー（窓に飛び込み次の章へ）

    perspective＋translateZ。CSS だけでも可

    重さ 中 驚き ★3

    参考：ocus.commadebyyuma.com

    作例を動かす
19. S19
    カードが積み重なる

    sticky の top をずらし scale

    重さ 軽 驚き ★2

    参考：oaksun.studio

20. S20
    分割された画面が合わさる・割れる

    2枚を clip-path で半分ずつ見せて寄せる

    重さ 軽 驚き ★2〜3

    参考：expo.dora.run

    作例を動かす
21. S21
    スクロール中だけ写真が WebGL で歪む

    DOM 位置に平面を合わせシェーダーで

    重さ 重 驚き ★2〜3

    参考：studio-dot.fr

22. S22
    円筒に並んだ写真が回る

    CSS 3D の rotateY

    重さ 軽〜中 驚き ★2

23. S23
    1枚の写真が章をまたいで移動・変形

    GSAP Flip

    重さ 中 驚き ★2〜3

24. S24
    全面の表紙が固定ヘッダーへ縮む

    scroll()＋scroll-state クエリ

    重さ 軽 驚き ★1〜2

25. S25
    読み終えた区画が沈んで退場

    sticky＋exit の view()

    重さ 軽 驚き ★2

26. S26
    無限ループするスクロール

    複製して巻き戻す。会社サイトの本体には不向き

    重さ 中 驚き ★2

27. S27
    曲線に沿って文字が流れる

    textPath の startOffset

    重さ 軽 驚き ★1〜2

28. S28
    モザイクから鮮明になる

    canvas か SVG フィルター

    重さ 中 驚き ★2

29. S29
    3D の写真の格子が組み変わる

    CSS 3D＋GSAP

    重さ 中 驚き ★2〜3

30. S30
    読了バー・章の進み具合

    scroll()

    重さ 軽 驚き ★1 このサイトで動作中ヘッダーの下端の線

31. S31
    やらない方がよい例 スクロールを奪う全画面スライド

    代わりは scroll-snap

重さ・驚きは当社の見立てです。調査は2026年10月時点で、参考にした実例は公開後に作り替えられている場合があります。