Parallax Playground

多層深度 × 滑鼠視差 × 針住時間軸

前中後景不同速度移動;滑鼠微幅帶動前景;整區塊釘住,滾動中播放動畫時間軸。

橫向視差

縱向滾動時,整條內容水平移動;每個面板再附加微幅視差,增添層次。

文字遮罩進場

標題與段落使用 clip-path 由左至右揭示,同步背景以較慢速度上移,形成視差。

這種做法適合章節開頭,搭配圖片或影片背景,保持內容清晰可讀。

卡片群 × 深度偏移

卡片在進入視口時由下往上飛入、淡入,並根據索引添加不同位移,營造空間感。

A

入場位移 +12%

B

入場位移 +8%

C

入場位移 +5%

D

入場位移 +3%

E

入場位移 +2%

F

入場位移 +1%