クリック・ページ切り替え

• 
  C12写真が集まって最初の画面になる → 押すと全画面ホテルのオープニング。写真が集まり、押した写真の場面へ全画面で入る
• 
  C21慣性でドラッグできる無限の写真の壁アパレルの商品の壁。投げて動かし、押すと詳細

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

C16C17C23 3

C13 1

C9C10C11C18 4

C1C2C3C7C19 5

C14C25 2

C26 1

C15 1

C4C21C24 3

C5C12C22 3

C6C8C20 3

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

1. C1
   一覧の写真が次のページの画像へ移る

   View Transitions

   重さ 軽 驚き ★2 このサイトで動作中サービス・事例の一覧から詳細へ移るとき

   参考：view-transitions.chrome.dev/profiles/mpa

2. C2
   幕・ワイプ・縦じまで覆う遷移

   View Transitions の keyframes で CSS だけで可

   重さ 軽 驚き ★2

   参考：interlude.crnacura.workers.devcielrose.tv

3. C3
   押した点から円形に開く遷移

   重さ 軽 驚き ★2

   参考：view-transitions.chrome.dev/circle

4. C4
   帯状・層状に切れて入れ替わる遷移

   clip-path＋transform

   重さ 中 驚き ★2〜3

5. C5
   立体的に動く遷移（めくれる・重なる・箱が回る）

   CSS 3D。酔い対策が必須

   重さ 中 驚き ★3

6. C6
   シェーダーで溶ける遷移（ディザ・インク・粒子）

   WebGL が必要

   重さ 重 驚き ★3

   参考：faint-film.com

7. C7
   線が描かれて幕になる・図形が変形して覆う遷移

   DrawSVG・MorphSVG

   重さ 軽 驚き ★2

   参考：truus.co

8. C8
   3D の場面を残したままの遷移

   自作の SPA ルーター＋WebGPU

   重さ 重 驚き ★3

   参考：github.com/ismamz/amber

9. C9
   方向つきのスライド遷移

   View Transitions の types

   重さ 軽 驚き ★1〜2

   参考：view-transitions.chrome.dev

10. C10
    数字のカウントつきプリローダー

    LCP を悪くするので推奨しない

    重さ 軽 驚き ★1〜2

11. C11
    ロゴが線で描かれるオープニング

    stroke-dasharray。初回だけ1秒以内

    重さ 軽 驚き ★1〜2

12. C12
    写真が集まって最初の画面になる → 押すと全画面

    GSAP Flip

    重さ 中 驚き ★3

    作例を動かす
13. C13
    見出しが割れて／解読されて現れる

    重さ 軽 驚き ★1 このサイトで動作中文字の見本市 Y035

14. C14
    全画面メニュー（切り抜きで開き、写真が散る）

    clip-path＋GSAP easeReverse

    重さ 中 驚き ★2

15. C15
    カードが全画面の詳細へ広がる

    GSAP Flip／View Transitions

    重さ 軽〜中 驚き ★2〜3

    参考：github.com/joffreysp/draggable-grid

16. C16
    アコーディオンが滑らかに開く

    ::details-content（interpolate-size は Chrome のみ）

    重さ ほぼ0 驚き ★1

    参考：developer.chrome.com/blog/styling-details

17. C17
    ダイアログの出入り

    @starting-style＋allow-discrete

    重さ ほぼ0 驚き ★1

18. C18
    写真の拡大表示（ピンチ・スワイプ）

    重さ 軽 驚き ★1〜2

    参考：photoswipe.com

19. C19
    絞り込みでカードが滑って並び直す

    GSAP Flip／View Transitions

    重さ 軽 驚き ★2

    参考：view-transitions.chrome.dev/cards

20. C20
    押した点から波紋で切り替わる WebGL スライダー

    シェーダー＋GSAP

    重さ 重 驚き ★3

    参考：github.com/biazo/codrops-animate-shaders-with-gsap

21. C21
    慣性でドラッグできる無限の写真の壁

    Draggable＋Inertia／React Three Fiber

    重さ 中 驚き ★2〜3

    作例を動かす
22. C22
    無限ループの3Dカルーセル＋画像の色の背景

    CSS 3D＋canvas

    重さ 中 驚き ★3

    参考：github.com/clementgrellier/gradientslider

23. C23
    CSS だけのカルーセル

    ::scroll-button。Chrome 135 のみ

    重さ ほぼ0 驚き ★1

    参考：chrome.dev/carousel

24. C24
    残像を描いて飛ぶ画像遷移

    GSAP

    重さ 中 驚き ★2〜3

25. C25
    押した時の手応え（成功の演出・布の風船ボタン）

    canvas-confetti／Lottie／Rive／Three.js

    重さ 軽〜重 驚き ★1〜3

26. C26
    商品がカートへ飛ぶ

    GSAP

    重さ 軽 驚き ★2〜3

    参考：github.com/biazo/codrops-add-to-cart

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