視差滾動：從視覺差到敘事維度

利用背景與前景不同滾動速度產生的景深感，配合無限創意，能構建沉浸式敘事體驗。建議使用 Chrome/Firefox/Safari 現代瀏覽器查看以下 10 個案例。

案例列表

• Mindworks — 腦科學主題，層層深入的視覺隱喻
• Herbal Bises — 草本護膚，植物生長動畫隨滾動展開
• Marco Grill — 餐廳，食材從農場到餐桌的視差旅程
• Moroccan Gigolos — 摩洛哥風情，多層次場景疊加極具深度
• Codetex Group — 科技公司，代碼片段與產品交互融合
• MiBOX — 盒子產品，3D 模型爆炸視圖滾動解構
• Studio None — 設計工作室，極簡幾何視差美學
• Big Bad Wolf — 童話改編，插畫場景層層推進
• Lexus New Generation IS — 汽車官網，車輛細節隨滾動逐層揭曉
• Life Fitness at Sochi 2014 — 冬奧健身贊助，運動數據視覺化敘事

技術落地關鍵點

1. 性能第一： `transform: translate3d()` 開啟 GPU 加速，避免 `background-position` 觸發重排。
2. 移動端降級： 觸屏無 hover、滾動事件頻率高，需提供靜態降級版或關閉視差開關。
3. 語義化標記： 內容結構不依賴視差呈現，確保無 JS/無視差環境下可讀性。
4. 動效節奏： 速度差不宜過大（建議 0.2-0.8 倍率），避免眩暈感。