Figma 視差效果教學：滑鼠追蹤互動設計，打造沉浸式體驗
Figma 視差效果靠 Parallax 外掛綁定滑鼠游標或頁面捲動事件，讓前景、中景、背景三層以不同速度移動，不用寫一行程式碼就能在原型裡做出立體深度感。根據 Figma Com…
Figma 視差效果靠 Parallax 外掛綁定滑鼠游標或頁面捲動事件，讓前景、中景、背景三層以不同速度移動，不用寫一行程式碼就能在原型裡做出立體深度感。根據 Figma Community 上該外掛頁面的說明，它明確支援 Mouse tracking、Scroll、Zoom-scroll 三種觸發模式，但真正決定效果成敗的關鍵在於你怎麼分層、移動幅度拿捏多少，以及做完之後這份原型能不能落地到真實網站。把這三件事拆開講，會比死記步驟更受用。
重點先看：視差效果的核心是分層加不同速度，讓層次之間的快慢差異產生深度；Figma 做出的是互動原型而非上線網站，落地得換成 Divi 或 Elementor 的視差模組。
接案做提案稿的時候，客戶最常被那種「會動、有深度」的首屏吸引。但很多設計師把視差想成萬靈丹，覺得裝個外掛、按個按鈕就搞定，結果要不是動得太誇張讓人頭暈，就是做完才發現這只是展示原型、根本貼不進網站。設計端製作與落地端實作得分開談，才會清楚在 Figma 做到哪、交給網站做到哪。對整個工具還不熟的人，先看 Figma 從註冊到精通的完整指南 打底，理解互動原型跟 UI 原型設計與 Wireframe 差異 的定位，再進來做視差會踏實得多。
Figma 視差效果是什麼：先搞懂它跟一般動畫的差別
視差效果（parallax）是讓前景、中景、背景三層以不同速度移動，藉此製造出立體深度感的互動手法；Figma 的做法是靠 Parallax 這類第三方外掛綁定滑鼠或捲動事件，讓你不用寫程式也能模擬這種互動。它跟普通動畫最根本的差別在於：普通動畫是整個畫面一起動，視差則是層次分明、各層快慢不一。
很多人把視差跟「讓畫面會動」畫上等號，這是誤解。視差的靈魂是分層加上不同速度，層越分明，深度感越強烈。你想想電動遊戲裡那種背景往右慢慢飄、前景飛快掠過的橫向卷軸，那才是視差的原型。套到網頁或介面設計，原理一模一樣：把畫面拆開、讓每層對滑鼠或捲動做出幅度不同的反應。理解了原理，之後換到任何工具都上手，這比記步驟重要太多。
- Figma 原生沒有視差模組，必須靠第三方外掛觸發
- 常見兩種觸發方式：滑鼠游標位置、頁面捲動進度
- 成品在 Figma 裡是互動原型，本質上是展示用，不等於上線網站
Figma 原生功能裡有 Smart Animate、有 Figma 動態按鈕轉場動畫、有 Figma 載入動畫原型互動，但這些都是框架內的過場動畫，沒有一個是真正的視差。視差需要監聽外部輸入（滑鼠座標或捲動百分比），這超出了原生互動設計的能力範圍，所以才得靠外掛。這也意味著你在 Figma 毛玻璃質感效果教學 學到的視覺技巧，在視差這裡派不上用場，得換一套思路。
有個觀念要先講清楚，免得期待落差。Figma 做出來的視差是互動原型，是展示用的，不等於能直接上線的網站。這點後面幾節會反覆出現，因為它是最多人踩雷的地方：在 Figma 裡是在「模擬」網站行為，不是「製造」網站。想往更完整的動態系統發展，可看 最新網頁設計趨勢風格解析 把視差放進更大的設計脈絡裡，或翻 網頁設計必備的關鍵元素 理解設計到開發的交接邏輯。
把視差放回整個互動設計的光譜裡看，會更清楚它的定位。從最靜態的線稿、到 Wireframe、到有過場動畫的高保真原型、再到能回應外部輸入的視差原型，每一階段對應不同的驗證目的。視差屬於最末端的那一階，目的是讓客戶或利害關係人「感受到」最終網站的氛圍，而不是用來驗證資訊架構或流程邏輯。把它放對階段，才不會在還沒確認流程時就陷入調參數的泥淖。流程與資訊架構該在靜態階段就定下來，動態只是表層氣氛的包裝。
動手前的素材分層與外掛安裝
動手做之前，先把畫面拆成至少三層（前景主體、中景、背景），各層獨立成 Frame 或圖片，再到 Figma Community 搜尋並安裝 Parallax 類外掛，準備工作才算到位。這兩件事少做任何一件，後面的設定都會卡住。
素材分層是整個視差成敗的關鍵，層越分明，深度感越強烈。最基本要拆三層：背景放最遠的山水或漸層、中景放中距離的物件、前景放最靠近鏡頭的主體。實務上背景適合用高解析、可重複拼接或漸層的圖，這樣滑鼠移動幅度大的時候邊緣不容易穿幫；前景則放主視覺主體，移動幅度要最大。素材來源可參考 商用免費圖庫素材網站總整理。分層這件事跟 Figma 網格排版系統設定 一樣，是那種「看起來枯燥、做對了後面全順」的基礎功；版面結構還不穩的人，先回頭看 網頁版面 RWD 響應式排版觀念。
| 圖層 | 位置 | 建議素材 | 移動幅度 | 注意事項 |
|---|---|---|---|---|
| 背景層 | 最遠 | 高解析全景、漸層 | 最小 | 邊緣留白避免穿幫 |
| 中景層 | 中間 | 中距離物件、裝飾元素 | 中等 | 承擔深度過渡 |
| 前景層 | 最近 | 主視覺主體、文字 | 最大 | 移動太強會搶焦點 |
分層有一個常被忽略的技術細節：邊緣留白。每當一層往某個方向移動，它原本覆蓋的範圍就會露出一塊沒有像素的空白，這就是「穿幫」。避免的方法很直接，把每一層的素材都做得比展示 Frame 大上一圈，背景通常要額外多出至少移動幅度的兩倍當緩衝。舉例來說，展示 Frame 是 1440×900，背景若會左右各偏移 20 像素，那麼背景圖的寬度至少要有 1480 像素，四邊各留 20 當安全框。中景與前景的留白邏輯相同，只是前景因為幅度大，安全框要更寬。素材尺寸這個基本功，跟 Figma 網格排版系統設定 裡強調的版心預留是同一個道理。
外掛安裝不複雜，開啟 Figma 從選單 Plugins → Search the community，輸入 parallax 就能找到一整排相關外掛。目前討論度最高、功能最完整的是那一款直接命名 Parallax 的外掛，根據其在 Figma Community 的頁面說明，它會自動把圖層排進 3D 透視，並把滑鼠、捲動、縮放捲動三種輸入轉成視差動畫。要提醒的是，Figma Community 裡的視差類外掛部分為免費、部分為免費增值或付費，計價模式會更新，裝之前務必看清楚當下的授權與價格說明，別鐵齒以為都免費。對外掛生態不熟的話，先翻一下 Figma 新手必裝外掛推薦 與 Figma 圖示外掛推薦清單，會對怎麼挑工具有概念。
準備工作還有兩件容易被忽略的小事。第一，開一個固定尺寸的展示 Frame，例如 1440×900 桌面或 390×844 手機，避免匯出時比例跑掉。第二，先決定觸發方式是滑鼠還是捲動，再選對應的外掛，別裝了一堆卻用不上。想做更深度的沉浸感，可搭配 把 2D 圖片轉成 3D 動畫的 AI 工具 先把平面素材變立體再分層，效果會再上一層。
實戰步驟：用 Figma 做出滑鼠追蹤視差效果
把分好層的素材依序放進 Frame，開啟 Parallax 外掛綁定到 Frame，設定每一層的移動方向與幅度（前景幅度大、背景幅度小），預覽互動後微調到滿意即可。整個流程大概十分鐘跑得完，但微調會花掉你更多時間。
以下五步是實際跑過最順的順序。記得每跑完一步就先預覽一次，不要五步全做完才看效果，否則出問題根本不知道是哪一步錯了。
- Step 1 疊放素材：把背景、中景、前景依序疊放進同一個父 Frame，確認 Z 軸順序是背景在最底、前景在最上
- Step 2 啟動外掛：執行 Parallax 外掛，選擇 Mouse tracking 模式，並把目標綁定到整個父 Frame
- Step 3 設定移動強度：逐層設定 X、Y 方向的移動強度，建議前景最強、背景最弱，落差才看得出深度
- Step 4 即時預覽：移動滑鼠看效果，幅度過大就調小數值，過小就調大，反覆抓那個甜區
- Step 5 命名儲存：確認無誤後命名儲存，方便後續匯出或交付給客戶看
Step 3 是最吃判斷的一步。新手最常犯的錯是把每一層的移動幅度都設得很大，以為越大越有戲劇性，結果整個畫面像地震。正確的方向是反過來：背景幅度壓到很小，可能只有 5 到 10 個單位；前景稍微放大，但也不要超過 30。數值沒有標準答案，會隨素材與畫面尺寸浮動，所以預覽這一步不能省。訣竅就一句話：幅度寧可保守也不要炫技，使用者感受到的深度感往往比預期的還強。這套移動幅度的手感，跟 Figma 互動式輪播滑塊設計 裡抓滑動阻力的邏輯很像。
移動方向也要想一下。前景可以同時動 X 與 Y，背景則建議只動單一方向，製造那種「遠方幾乎不動、近處跟著你」的錯覺。這跟攝影裡景深的物理感受是一致的，眼睛會自動把「動得少」判讀為「距離遠」。把這個直覺記住，你設定參數時就不用死背數字。整體而言，滑鼠追蹤視差最適合放在首屏 Hero Section，因為那是一進網站目光停留最久的地方；若你的首屏還在規劃階段，Landing Page 高轉換銷售頁製作 與 Elementor 滿版 Hero Section 設計 能給你方向。
參數調校的進階手感與常見失誤
參數調校有一組很少被講清楚、但會直接決定質感的觀念，叫做「速度落差比」。它指的是前景與背景移動幅度之間的比值，絕對數值本身只是參考。前景 30、背景 10 的落差比是 3 比 1，前景 15、背景 5 也是 3 比 1，兩者絕對值差一倍，但呈現出來的深度結構是接近的。實務上你會發現，把整體絕對值一起等比例放大或縮小，可以控制「動得明不明顯」，而調整落差比可以控制「深度感強不強烈」。先把絕對值壓到保守，再慢慢拉大落差比，是比較安全的調校順序。一旦你習慣看比值而非單一數字，調起來會快很多。
另一個失誤是方向打架。同一層如果 X 與 Y 都設了很大幅度，又同時開啟負方向，畫面會出現不自然的扭動。穩妥的做法是每一層先固定一個主方向（例如前景跟著滑鼠做輕微的 X 偏移），Y 方向只放極小的修正值去模擬呼吸感。背景與中景則可以設成與前景相反的極小幅位移，製造一種被推開的距離感。這些都是要在即時預覽裡反覆試的，沒有人能一次到位。把參數表寫下來交給工程師時，連方向正負、落差比、留白尺寸都要附上，這份規格才有實作價值。
滾動視差、淡入與縮放
把外掛切換成 Scroll 模式就能做滾動視差；淡入淡出、放大縮小則是透過在外掛裡為圖層套用額外的變形屬性，重點是讓每層的觸發時機錯開，畫面才會有節奏感。這裡的「節奏感」是質感分水嶺，一堆視差看起來廉價，就是因為所有效果同時觸發。
滾動視差依頁面捲動百分比觸發，適合長頁 Landing Page 或故事性強的品牌頁。比起滑鼠追蹤，滾動視差在行動裝置上更可靠，因為手機沒有滑鼠這個輸入，但手指一定會捲動。如果你做的是 一頁式網頁設計實戰攻略、Divi 一頁式網頁設計模板 或 Landing Page 轉換率優化攻略，滾動視差幾乎是首選觸發方式。手機端的考量稍後會專門談。
| 效果類型 | 觸發條件 | 關鍵參數 | 適合場景 | 常見失誤 |
|---|---|---|---|---|
| 滑鼠追蹤 | 游標 X/Y 座標 | 各層移動強度 | 首屏 Hero | 手機無法觸發 |
| 滾動視差 | 頁面捲動百分比 | 各層捲動速率 | 長頁 Landing | 速率差太大頭暈 |
| 淡入淡出 | 捲動到區間 | opacity 觸發區間 | 內容段落 | 整批一起出現太生硬 |
| 放大縮小 | 捲動到區間 | scale 範圍 | 產品圖聚焦 | 前後差距過大突兀 |
淡入淡出靠調整 opacity 的觸發區間來做。不要讓整批元素在同一個捲動百分比一起冒出來，那會像簡報切換投影片一樣生硬；改成每個元素錯開 5 到 10 個百分比的觸發點，畫面就會有那種「一個接一個浮現」的節奏。放大縮小則要設定 scale 範圍，建議前後差距控制在 0.9 到 1.1 之間，也就是最多縮小一成或放大一成，可辨識但不突兀。這些細節手感跟 排版設計字體與行距技巧、中文字體設計與字體推薦 裡談的呼吸感是同一回事：差一點點，看起來天差地遠。
多種效果混用時有個鐵律要守住：同一層不要同時又移動、又縮放、又淡入，這三個屬性疊在一起會互相打架，看起來像沒調好的故障動畫。穩妥的做法是進階設定前先固定基本移動，再逐項加入，比較容易抓出問題出在哪。實務上多數專案做到「移動加淡入」兩種就很夠了，硬要疊第三種往往是設計師自己玩得開心，使用者根本分不出來。配色與情緒的搭配也別忘，可對照 色彩心理學在設計的應用，讓動態與視覺調性一致。
滾動速率的節奏設計
滾動視差最容易翻車的地方是速率差。當背景速率設成 0.2、前景設成 1.0，這中間 5 倍的落差會讓使用者覺得畫面被撕開，長時間觀看會有明顯的暈眩。比較安全的速率分配是把前景固定在 1.0（也就是與捲動同速）、中景落在 0.6 到 0.8、背景落在 0.4 到 0.5，整體落差控制在 2 倍以內。這組數字來自一個直覺：人眼對連續運動的容忍度，大約到 2 倍速差就會開始感到不適。在長頁面上，速率差越小、體驗越穩；只有在純展示型、捲動距離很短的品牌首屏，才適合用較大的速率差追求戲劇性。
節奏感還可以靠「段落呼吸」來強化。所謂段落呼吸，就是在兩段密集的視差之間，刻意插入一段幾乎不動的純文字區，讓眼睛休息。這就像音樂裡的休止符，沒有聲音的那一拍往往比有聲音的更動人。實作上只要把那一段的視差速率全部設成與捲動同速（等於沒有視差），它就會形成視覺上的停頓點。這個手法在故事型品牌頁特別有效，能讓使用者的情緒跟著頁面起伏，而不會被連續不斷的動態轟炸到麻木。
Figma 視差成品的匯出與交付
Figma 的視差成品主要匯出成 SVG、GIF 或 MP4 動畫用於展示與提案；若要真正上線到網站，必須把設計邏輯移交給網頁端的視差模組，而非直接把 Figma 動畫貼上去。這是很多人完工那一刻才意識到的殘酷現實。
三種格式各有定位。SVG 體積小、可在網頁縮放不失真，適合提案與社群展示，但它本質是靜態向量或簡單動畫，互動性有限；GIF 是最通用的動畫展示格式，丟進簡報、貼進 LINE、放上 Dcard 討論串都能播，但色彩會壓縮、檔案偏大；MP4 畫質最好，適合錄一段操作 demo 給客戶直接看成品的樣子，缺點是不能互動，只是影片。SVG 與 MP4 的這些特性，都可對照 Figma 官方匯出文件的格式說明。實務上提案多半給 GIF 或 MP4，真正要落地時才會改走網頁模組，分工明確。
| 格式 | 體積 | 畫質 | 互動性 | 最適用途 |
|---|---|---|---|---|
| SVG | 小 | 向量不失真 | 有限 | 社群展示、提案投影片 |
| GIF | 中大 | 256 色壓縮 | 無 | 跨平台播放、溝通用 |
| MP4 | 中 | 最佳 | 無 | 操作 demo、客戶審稿 |
交付給工程師時，附上分層檔與參數表，比交一張圖更實用。所謂參數表就是把每一層的移動方向、幅度、觸發條件、opacity 區間、scale 範圍整理成一張表，工程師拿到就能照著在網頁端實作。光給一個 GIF，工程師只能用猜的，最後做出來跟你的原型一定對不上。說到底，交付的本質是把「設計規格」講清楚，這跟 網頁設計從零到一的完整指南 裡談的交付觀念是一致的。
想直接落地到 WordPress，請改用網頁編輯器的視差功能重做，不要妄想把 Figma 動畫貼上去就了事。記得在交付文件裡說明哪些是展示用原型、哪些是可上線規格，避免客戶誤以為收到 GIF 就等於網站做好了。這層認知落差是接案糾紛的常見來源，事前講清楚，事後少很多麻煩。整體交付流程可參考 作品集網站設計指南。
規格表該長什麼樣子
規格表的好壞直接決定落地品質。一張合格的視差規格表至少要包含六個欄位：圖層名稱、素材檔名、移動方向（X 或 Y）、移動幅度（絕對值與單位）、觸發方式（滑鼠或捲動）、以及備註（例如「手機版關閉」或「prefers-reduced-motion 啟用時停用」）。把這六欄填滿，工程師就能在不回頭問你的情況下完成八九成的實作。少了任何一欄，就會多一輪往返溝通，而往返溝通累積起來往往比設計本身還耗時。
| 圖層名稱 | 素材 | 方向 | 幅度 | 觸發 | 備註 |
|---|---|---|---|---|---|
| bg-mountain | bg-mountain.png | X 單向 | 8 | 滑鼠 | 桌面限定 |
| mid-trees | mid-trees.png | X+Y | 16 / 6 | 滑鼠 | 落差比 3:1 |
| fg-title | fg-title.svg | X+Y | 28 / 12 | 滑鼠 | 前景，手機關閉 |
| section-2-fade | — | opacity | 0→1 | 捲動 35-55% | 錯開 5% |
表格右邊的備註欄最容易被省略，卻最有價值。它記錄的是「這個效果在什麼情況下要被犧牲掉」，例如效能不足、手機端、或使用者啟用減少動態時。把這些邊界條件寫清楚，前端實作時才有依據決定要不要寫額外的判斷邏輯。沒有這欄的規格表，工程師只能照預設全部實作，最後在手機上炸掉再回頭修，反覆折騰。把邊界條件當成規格的一部分，是成熟設計師與新手的明顯分界。
視差效果的價值與風險：放對地方才加分
視差用在 Hero Section 或故事性強的長頁能提升沉浸感與停留時間，但過度移動會讓使用者頭暈、也可能拖慢載入速度；建議只在重點頁面用、幅度收斂，並以行動裝置體驗為優先。值不值得放，答案在於「放對地方、放對幅度」，把這兩件事做對，視差才會是加分項。
視差對轉換率的幫助是間接的。它靠的是延長使用者停留、強化品牌氛圍，對直接促單的貢獻有限，別期待裝了視差訂單就翻倍。沉浸感強的頁面確實會讓人多看幾秒，這對品牌網站或故事型 Landing 是有價值的；但對純功能性頁面（結帳、表單、會員中心），視差通常是干擾多於幫助。這跟「功能優先」的設計原則一致，會員流程裡任何會搶走注意力的動效都該先拿掉。
效能這塊要認真看待。視差動畫會增加瀏覽器的渲染負擔，尤其是大量圖層同時移動時，會吃掉 CPU 與 GPU 資源，直接影響載入速度與流暢度。務必搭配圖片壓縮與延遲載入，否則在效能差的裝置上會卡頓。Google 在 2018 年 1 月宣布行動搜尋將把網頁速度納入排名因素，這項 Speed Update 只影響提供最慢體驗的頁面，且只影響少數查詢 [來源：〈Google Search Central Blog〉〈https://developers.google.com/search/blog/2018/01/using-page-speed-in-mobile-search〉〈2018-01-17〉]；2020 年 5 月 Google 進一步宣布結合 Core Web Vitals 的網頁體驗排名訊號 [來源：〈Google Search Central Blog〉〈https://developers.google.com/search/blog/2020/05/evaluating-page-experience〉〈2020-05-28〉]。這代表視差的效能成本會直接折算成 SEO 排名風險，不能輕忽。可對照 網站速度優化核心技巧 一起看，圖片壓縮參考 圖片壓縮工具實測推薦，效能問題會直接反映在 Core Web Vitals SEO 核心指標優化 上。
更嚴肅的議題是無障礙與前庭不適。過強的視差移動可能觸發部分使用者的前庭系統不適，出現頭暈、噁心等反應，這不是誇張，而是有正式規範背書的 UX 議題。W3C 的 WCAG 技術文件 C39 明確指出，應使用 prefers-reduced-motion 這類媒體查詢，讓要求減少動態的使用者能獲得替代體驗；MDN 的 prefers-reduced-motion 文件也說明，前庭動暈症使用者可能希望在檢視動畫前先啟用減少動態功能。幅度收斂在這裡不只是品味問題，而是直接關係到能不能放行上線。
手機端是另一個必須分開處理的戰場。行動裝置沒有滑鼠，滑鼠追蹤視差在手機上根本不會觸發，等於做白工；滾動視差雖然能動，但手機效能較弱、螢幕較小，幅度過大會讓整個畫面劇烈晃動，體驗很差。實務做法是手機版大幅降低幅度，或直接改用簡化效果。考量到行動裝置在 2026 年第一季已佔全球網站流量的多數，這塊體驗輕忽不得 [來源：〈Statista〉〈https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/〉〈2026-04-28〉]。響應式設計的觀念在這裡同樣適用，可先看 RWD 響應式網頁設計觀念 打底；行動版體驗若做壞了，網站跳出率與 SEO 排名關係 裡談的負面影響會立刻浮現。
把上面幾個變數綜合起來，可以看看一個常見的情境長怎樣。以一個月流量約 1 萬到 3 萬的工作階段、主打品牌故事的品牌長頁為例，這類站常見的狀況是：首屏放一組幅度收斂的滾動視差（前景速率約 1.0、中景約 0.6 到 0.8、背景約 0.4 到 0.5），搭配兩到三層圖層，目的是讓使用者在前幾個螢幕的高度就感受到氛圍。依這類站的典型表現幅度，桌面端在首屏的平均停留時間可能比無視差版本多出約 8% 到 15%，捲動到第二段的比率也會略升，但這個增幅主要來自氛圍強化，對最終轉換（例如填表或加入購物車）的直接拉抬往往很有限，多數落在個位數百分比以內，甚至量測誤差範圍內看不出顯著差異。換句話說，視差在這類站是「延長停留、強化印象」的加分項，不是直接帶單的引擎。
同一個情境也藏著最常被低估的成本：行動端與效能。視差動畫會吃掉渲染資源，若沒做圖片壓縮、延遲載入與圖層數量控制，桌面端原本順暢的體驗，到了中階手機或網速較差的環境就可能出現卡頓，嚴重時 LCP（最大內容繪製）會多出約 0.5 到 1.2 秒，反而拉高跳出率，把首屏氛圍營造的成果抵銷掉。常見的務實做法是手機版直接關閉滑鼠追蹤、把滾動視差降到極輕量或改為淡入，並套用 prefers-reduced-motion 提供替代體驗。決策角度很明確：放不放視差，要先問這個頁面的任務是「讓人慢慢感受氛圍」還是「讓人快速完成操作」；若是後者，與其冒效能與無障礙風險硬加動態，不如把資源投在更乾淨的排版與更快的載入上，對整體體驗與 SEO 都更穩當。
有一個簡單的自我評估標準：做完視差之後，問一句「這個效果有沒有幫助使用者理解內容」。如果答案是「只是看起來酷」，那就別加。視差是調味料，不是主菜，加太多會蓋掉原本的味道。這個判斷標準放諸所有動態設計皆準，Bento Grid 創意網頁排版設計 裡也看得到同樣的克制美學。
把視差落地到 WordPress
Figma 成品不能直接貼進網站，落地的方法是依照設計邏輯，在 WordPress 主題或頁面編輯器裡用對應模組重新設定圖層與移動參數。這一步是接案工作者的真正考驗，因為它決定了你的原型能不能變成會上線的東西。WordPress 目前仍是全球使用最廣的內容管理系統，佔所有網站的比例超過四成，因此視差落地的主流路徑幾乎都繞著 WordPress 生態打轉 [來源：〈W3Techs〉〈https://w3techs.com/technologies/details/cm-wordpress〉〈2026-06-29〉]。
已經用 Divi 架站的專案，最直接的落地路徑就是 Divi 內建的視差捲動設定。Divi 的背景圖與區段都支援視差選項，能在不寫程式的情況下重現滾動視差效果，適合已經習慣 Divi 工作流的團隊。完整操作可以看 Divi 視差滾動效果實戰教學；若你的站還沒用 Divi，先翻 Divi 主題完整架站指南 與 用 Divi 打造專業公司官網。Divi 的視差還能跟 Divi 圖片懸停互動特效 搭配做出更豐富的互動。
| 落地方式 | 免寫程式 | 支援滑鼠追蹤 | 支援滾動視差 | 門檻 |
|---|---|---|---|---|
| Divi 內建模組 | 是 | 否（需客製） | 是 | 低 |
| Elementor Pro | 是 | 部分（靠附加元件） | 是 | 中 |
| JS 套件客製 | 否 | 是 | 是 | 高 |
Elementor 用戶則透過動效與視差附加元件達成類似互動。Elementor Pro 內建的動態效果與部分第三方附加元件能做滾動視差與簡單的滑鼠互動，但完整滑鼠追蹤通常需要額外套件。入門看 Elementor 頁面編輯器完整教學，進階功能翻 Elementor Pro 進階功能指南。其他可搭配的 Elementor 資源還有 Elementor 圖片輪播視覺效果。
若要完整重現滑鼠追蹤視差，就得借助 JS 套件或客製程式，門檻較高，通常會交給前端工程師處理。常見的做法是用 GSAP、Rellax 這類輕量函式庫監聽滑鼠或捲動事件，再驅動圖層位移。這條路彈性最大，但成本也最高，要看專案預算與需求決定值不值得。對接案的設計師來說，先確認客戶要的是「展示級原型」還是「上線級互動」，再決定走哪條路，會少走很多冤枉路。落地相關的背景知識，可以對照 網站架設與建置完整流程 與 網頁設計自學路線圖規劃。
落地時還有兩件不能漏的事。第一，再次確認手機版行為，必要時關閉視差或改用簡化效果，前面講過手機沒有滑鼠、晃動又傷體驗。第二，把 Figma 當規格書、把網站當實作端，兩邊參數對齊才不會走樣。實務交付習慣是附一張對照表，左邊是 Figma 原型截圖與參數、右邊是網站實作後的預期效果，客戶與工程師都看得懂。這套交付觀念跟 餐飲品牌網站設計實戰、品牌官網設計全攻略 裡談的「設計到落地」是一脈相承的。
視差效果決策矩陣：什麼情況該用、什麼情況別碰
視差值不值得用，最佳做法是用一個二維矩陣來判斷，別只憑直覺。兩個軸分別是「頁面性質」（從純功能性到純氛圍性）與「使用者任務」（從必須快速完成到可以慢慢探索）。把你的頁面放進這個矩陣，落點會直接告訴你視差該不該用、用多重。
| 任務：快速完成 | 任務：慢慢探索 | |
|---|---|---|
| 純功能頁 | 禁用（結帳、登入、表單） | 低限度（搜尋結果頁） |
| 混合頁 | 禁用（會員中心儀表板） | 輕量滾動視差（部落格首頁） |
| 純氛圍頁 | 中幅度（活動報名首屏） | 全幅度（品牌故事長頁、Hero） |
矩陣的用法很直觀：頁面越偏功能、任務越要求速度，視差就越要收斂甚至拿掉；頁面越偏氛圍、任務越容許探索，視差才有揮灑空間。落在「禁用」格的頁面，任何動態都可能讓使用者分心而出錯，例如結帳流程裡一個會移動的背景圖，可能讓人漏看優惠碼欄位。落在「全幅度」格的頁面，反而是視差最能發揮價值的地方，因為使用者的目的本來就是沉浸與感受，完成任務的效率可被犧牲。把每個頁面先歸類，再決定參數，是避免「為了動而動」最有效的方法。
除了矩陣，還可以用一張評分卡替視差打分。四個評分維度分別是：與品牌調性的契合度（高 2 分、中 1 分、低 0 分）、對內容理解的幫助（高 2、中 1、低 0）、效能影響可承受程度（高 2、中 1、低 0）、無障礙風險可控程度（高 2、中 1、低 0）。總分 8 分以上可以放心用、5 到 7 分建議限縮範圍只放首屏、4 分以下則不建議放。這張卡的好處是把主觀判斷拆成可討論的項目，接案時可以直接拿來跟客戶對焦，避免淪為「我覺得好看」與「你覺得太花」的各說各話。
視差效果疑難排解 checklist
做出來的效果不如預期時，照著下面的 checklist 逐項排查，通常能在十分鐘內定位問題。這份清單把最常見的故障點與對應解法整理在一起，省得你每次都從頭猜。
- 畫面完全不動：確認外掛已綁定到父 Frame 而不是某個子圖層；確認觸發模式選對（滑鼠模式在預覽時要實際移動游標才會反應）
- 只有某一層動、其他層不動：檢查該層是否被鎖定或隱藏；檢查該層是否被設成與父 Frame 同一個變形群組，導致外掛抓不到
- 邊緣出現空白穿幫：把該層素材放大，四邊各預留移動幅度兩倍的安全框；或把背景改成可重複拼接的漸層
- 動得太誇張像地震：把所有層的絕對幅度等比例縮小一半，再視情況微調；優先壓背景幅度
- 動得太微弱感受不到深度：維持絕對幅度不變，拉大前景與背景的落差比（例如從 2:1 拉到 3:1）
- 多層移動方向互相打架：每層先固定單一主方向，Y 方向只留極小修正值；避免同層同時開 X 與 Y 大幅度
- 匯出 GIF 後色彩變糊：這是 GIF 256 色壓縮的本質限制，改匯 MP4 可解；若必須用 GIF，盡量減少漸層與膚色面積
- 手機預覽完全沒反應：滑鼠追蹤在手機不會觸發，改用滾動模式；或為手機版準備獨立的簡化原型
這份 checklist 的一個使用訣竅是「一次只改一個參數」。視差的參數之間會互相牽動，你同時調三個變數，出問題根本不知道是誰造成的。養成改一個、預覽一次、再改下一個的紀律，除錯效率會比反覆大改快上好幾倍。這個紀律放諸所有參數型工具皆準，跟 Figma 互動式輪播滑塊設計 裡調阻力、Figma 動態按鈕轉場動畫 裡調時長是同樣的道理。
Figma 視差效果常見問題
底下把接案與教學過程中最常被問到的問題整理出來，挑的是會影響決策或容易踩雷的幾題，跟正文用詞不同，方便快速查找。
視差效果能用 Smart Animate 做出來嗎？
不行。Smart Animate 只能在兩個 Frame 之間做過場補間，無法監聽滑鼠座標或捲動百分比這類持續性的外部輸入，所以一定要靠第三方外掛。
Figma 做完視差效果可以匯出什麼格式？
主要匯出 SVG、GIF、MP4。SVG 體積小適合社群與提案，GIF 通用但色彩壓縮，MP4 畫質最佳適合錄 demo 給客戶看。三者都是展示用，不等於可上線的互動成品。
Figma 的視差效果能放進網站嗎？
不能直接貼上。Figma 產出的是互動原型，落地到網站要依照設計邏輯，在 Divi、Elementor 的視差模組或 JS 套件裡重新設定圖層與參數，原型只能當規格書用。
視差效果會拖慢網站速度嗎？
會。大量圖層同時移動會吃掉瀏覽器渲染資源，必須搭配圖片壓縮、延遲載入，並控制圖層數量與動畫複雜度，否則會拖累 Core Web Vitals 與 SEO 排名。
怎麼讓視差在無障礙體驗上過關？
實作 prefers-reduced-motion 媒體查詢，當使用者系統啟用減少動態時，自動把視差降為靜態或極輕微版本。這是 WCAG 技術文件 C39 建議的做法，也是前庭不適使用者唯一的緩解途徑。
視差原型做完，工程師卻說做不出來，怎麼辦？
多半是規格表不夠完整。回頭補上每一層的方向、幅度、觸發方式、手機版與減少動態時的處理方式，工程師才有實作依據。必要時附上 Figma 原型截圖與預期效果對照表，降低解讀落差。