Divi 視差滾動效果實戰教學：讓網站擁有驚艷的立體深度感
Divi 的視差滾動是一組可以排列組合的滾動效果，包含背景視差、圖層視差、模糊與透明漸變、旋轉、縮放與滾動 transform 六類，各有觸發條件與適用版面。決定成品好壞的關鍵在於…
Divi 視差滾動效果教學：背景、圖層、旋轉、縮放與行動版取捨
Divi 的視差滾動是一組可以排列組合的滾動效果，包含背景視差、圖層視差、模糊與透明漸變、旋轉、縮放與滾動 transform 六類，各有觸發條件與適用版面。決定成品好壞的關鍵在於「會不會挑」：背景視差分 CSS 與真實兩種，CSS 靠 background-attachment:fixed 輕量但行動版多數瀏覽器會忽略 fixed，真實視差靠 JS 立體感強但吃效能。根據 Google web.dev 的官方定義，動態效果造成的版面位移會直接反映在 LCP、INP、CLS 三個 Core Web Vitals 指標上，一個網站用 1 到 2 個重點版面做視差就夠。
重點先看：Divi 內建六類滾動效果，背景視差分 CSS 與真實兩種，前者輕但手機多數瀏覽器會忽略 fixed，後者立體但吃效能；一個網站用 1 到 2 個重點版面做視差就夠。Google web.dev 把 CLS 列為 Core Web Vitals 三大指標之一，視差造成的版面位移會直接拉高這個分數。手機流量在 2026 年第一季已佔全球網站流量的 52.27%，行動版的呈現品質直接決定過半使用者的第一印象。[來源：Statista〈Share of mobile web traffic worldwide quarterly 2015-2026〉 https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/ 2026-04-28]
視差滾動到底是什麼
視差滾動（parallax scrolling）指的是讓頁面上不同圖層以不同速度移動的技巧，藉由前景快、背景慢的速度差，製造出立體深度感。它本身是一種「滾動時的層次錯位」，最常出現在首頁 hero 大圖背景與故事型一頁式網站。很多人把「會動的背景」直接等同視差，這其實是誤解，沒有速度差，就只是單純的固定背景，跟視差沒有關係。
實作層面，視差靠三種手段達成：CSS 的 background-attachment:fixed、transform 位移，或 JavaScript 監聽捲動位置改變元素位置。這三條路線各有代價，CSS 最輕但行動版支援最差，JS 立體感最強但最吃 CPU。Divi 把這些原本要寫程式的效果包成 Visual Builder 裡的可調參數，這是它相對於純手刻最大的價值，但也是最容易讓人亂開的地方。
常見的雷點出在全頁視差。早期很多品牌站每個 section 都開 True Parallax，桌面看起來很炫，用手機一測整頁頓到滑不動，PageSpeed Insights 的 LCP 直接掉到紅色。這類案例帶出的結論是：視差的設計問題核心在節制，而不是技術。若正在規劃整體架站流程，建議先看過 Divi 主題終極指南 與 Divi 主題架站全攻略，把視差放進正確的版面脈絡裡，讓它扮演敘事工具而非到處亂貼的裝飾。
從感官原理來看，視差之所以「看起來有深度」，是因為人類的大腦習慣用相對運動來判斷距離。當前景移動快、背景移動慢，視覺系統會自動把背景推到更遠的位置，這正是日常走路時遠山比近樹慢的同一套機制。理解這一點，就會明白為什麼「速度差」是視差的必要條件：兩個圖層等速移動時，大腦判定它們在同一個平面上，深度感就消失。所以評估一段滾動效果算不算視差，只要問一句：這幾個圖層有沒有速度差。
Divi 內建的六種滾動效果
Divi 能做的滾動相關效果大致分六類：背景視差（CSS 與真實兩種）、圖層視差（多模組不同速度）、模糊與透明漸變、旋轉、縮放，以及滾動觸發的 transform 變化。背景視差適合 hero 與全寬區塊，圖層視差適合作品集與故事頁，旋轉與縮放則適合點綴單一模組而非整頁使用。選擇邏輯很單純，先問「這個版面要不要強調深度與層次」，再決定用哪一種，不是每個區塊都要動。
這六種效果看似很多，但背後只有一個設計問題：你想引導使用者看哪裡。背景視差創造空間感、圖層視差創造浮動感、縮放引導點擊、模糊製造聚焦進場。把這個目的想清楚，六種效果就會自動收斂成兩到三種你真正需要的。如果你對版型選擇還沒把握，可以對照 Divi 高質感版型庫 與 Divi 佈局版型設計 找到適合放視差的版面。
| 效果類型 | 觸發方式 | 效能負擔 | 適用版面 | 行動版表現 |
|---|---|---|---|---|
| 背景視差（CSS） | background-attachment:fixed | 低 | hero、全寬區段 | 多數瀏覽器忽略 fixed，易失效 |
| 背景視差（True／JS） | JS 監聽捲動計算位移 | 中高 | hero、品牌故事 | 可運作但易頓挫 |
| 圖層視差 | 多模組 Scroll Effects 不同速度 | 中 | 作品集、故事頁 | 可保留但建議減量 |
| 模糊漸變 | 滾動調整 blur 值 | 中 | 進場聚焦圖片 | 視裝置效能而定 |
| 旋轉 | 滾動改變 rotate | 低中 | 點綴單一裝飾元素 | 可保留 |
| 縮放 | 滾動改變 scale | 低中 | CTA、圖片引導 | 可保留 |
上表是挑效果時的決策依據。你可能會問：為什麼旋轉和縮放被歸在「點綴」而不歸在「主體」？因為這兩種效果一旦整頁使用，使用者的視線會被持續干擾，反而讀不下內容。背景與圖層視差之所以能當主體，是因為它們創造的是「環境感」，大腦可以忽略它繼續閱讀；旋轉與縮放創造的則是「物件動作」，會持續搶走注意力。這個差異聽起來抽象，但實際 A/B 測一次就會有感。
選效果時也別忘了整體動態風格的一致性。站上若同時有懸停特效、商品輪播或 Lottie 動畫，視差就要收斂，否則動態元素互相搶戲；頁首已採用 sticky 或動態設計時，hero 視差更要退一步。
背景視差實作：CSS 視差 vs 真實視差，挑錯就拖垮速度
在 Divi 的區段或資料列背景設定裡，開啟背景圖片後把「Use Parallax Effect」切到開啟，再於「Parallax Method」選 True Parallax（JS）或 CSS Parallax。想省效能選 CSS，想要背景跟著滾動產生明顯位移的立體感選 True，但後者在行動版常被停用或頓挫，需要額外處理。這個選擇要看你的版面目的與效能預算，不能只看心情。
CSS 視差靠 background-attachment:fixed 實作，原理是讓背景圖固定在視窗、前景內容滾過去，產生相對位移。它的優點是幾乎不耗 JS、不額外載入腳本，缺點是行動版多數瀏覽器會主動忽略 fixed 這個屬性。根據 MDN web docs 對 background-attachment 的說明，fixed 在行動瀏覽器的支援極為有限，iOS Safari 與多數手機瀏覽器會把它當 scroll 處理或直接忽略，這屬於規格選擇而非 bug。
True Parallax 則靠 JavaScript 監聽捲動事件，即時計算背景圖的位移量並動態套用 transform。它的立體感明顯比 CSS 強，因為可以控制移動倍率、方向、緩動曲線，但代價是持續的 JS 計算會佔用主執行緒，在低階手機或頁面元素多時容易掉格。若 hero 背景圖本身已經很大，再疊一層 JS 視差，LCP 幾乎一定會被拖累，Core Web Vitals 的評分機制本來就會把這類首屏資源算進去。
- 進入設定：在 Visual Builder 點 Section 或 Row 的齒輪，切到 Design 分頁找到 Background
- 設定背景圖：上傳或選擇背景圖片，建議先壓縮到 200KB 以內、寬度至少 1920px
- 開啟視差：把 Use Parallax Effect 切到 ON
- 選方法：在 Parallax Method 選 CSS Parallax 或 True Parallax
- 設覆蓋方式：Background Image Size 選 Cover、Background Repeat 選 No Repeat
- 行動版檢查：切到手機預覽確認是否破版或失效
背景圖的選擇是這一步最容易被忽略的細節。很多人開了視差卻用一張 4000px 寬、沒壓縮的 PNG，結果載入時間暴增。實務上可以用 WordPress 圖片優化指南 裡的流程先壓圖，搭配 圖片壓縮工具實測推薦 挑工具，再用 商用免費圖庫網站 或 免費 3D 素材資源 找適合做大圖背景的素材。背景圖不夠大或沒設 Cover，邊緣就會露白，這是最常見的破版來源。
背景圖的「視覺重心」也得納入考量。視差會讓背景跟著滾動緩慢位移，如果你的主體人物或文字剛好在圖片的某個位置，位移後可能被切掉或跑到邊緣。比較穩的做法是把主體放在圖片正中央、保留上下左右各約 15% 的安全邊距，這樣即使視差把背景推上推下，主體都還在畫面內。深色或低對比的背景圖尤其要測試文字是否還能讀，必要的話在背景上加一層半透明的深色覆蓋（overlay），讓標題文字的對比度拉高，這也是無障礙設計的基本要求。
如果你同時在規劃 hero section 的整體設計，背景視差可以跟 Divi 標題設計技巧 搭配，讓標題文字與背景視差形成層次。也有人會在 hero 上疊 電子報訂閱 表單，這時要注意表單模組本身的 Scroll Effects 不要跟背景打架。
圖層視差與滾動 transform：做出多層次立體深度
Divi 的 Scroll Effects 在模組設計分頁的 Transform 與 Scroll Effects 區塊，可針對單一模組設定「滾動到特定位置時」的位移、旋轉、縮放、模糊與透明度變化。把同一個 Section 裡的多個模組設定成不同起始與結束值，就會產生層次錯位，這就是圖層視差的核心做法。它跟背景視差的差別在於：背景視差動的是背景、圖層視差動的是前景物件。
可調的維度有六個：垂直位移、水平位移、旋轉、縮放、模糊、透明度。每一項都能設起始值與結束值，並指定觸發的滾動區間。層次感的關鍵在於同一 Section 內不同模組給不同的滾動速度倍率，例如左邊卡片用 0.5 倍速、右邊用 1 倍速、中間標題用 0.8 倍速，三者錯開就會浮現深度。全部設成等速時，畫面只是整齊地一起動，深度感歸零。
圖層視差最適合的場景是作品集與故事型版面。作品集卡片用不同速度進場，可模擬實體空間的縱深；品牌故事頁用多層次滾動，能讓敘事有節奏感。若你正在做這類版面，可參考 Divi 作品集設計教學 與 Divi 一頁式網頁設計，把圖層視差放進正確的敘事結構。一頁式網站尤其適合，因為它的滾動本身就是敘事工具，視差只是在強化這個敘事。
這裡有個反直覺的提醒：圖層視差的效果強度，跟使用者的「可讀性容忍度」成反比。一個畫面裡有兩個模組做滾動，看起來有質感；有六個模組做滾動，看起來像故障。比較穩的做法是把每個 Section 的滾動模組數量限制在兩到三個，剩下的模組保持靜止，讓動靜之間有對比。沒有靜止襯托的動態，等於沒有動態。
設計圖層視差時，還有一個進階技巧叫「景深分層」。把畫面上的元素依視覺距離分成三層：遠景（背景圖、大色塊）給最慢的速度倍率、中景（主標題、主圖）給中等倍率、前景（小裝飾、icon、CTA）給最快的倍率。三層之間的速度比建議落在 1 比 2 比 4 左右，差距太小的話深度感不明顯，差距太大又會顯得不自然。這個比例源自攝影與動畫產業常用的景深法則，移植到網頁上一樣有效，能把單調的二維版面撐出空間感。
如果你的版面還用了 Divi 分類篩選外掛、Divi Supreme 模塊擴充 或從 Divi Marketplace 免費資源 抓來的擴充模組，要特別注意這些第三方模組對 Scroll Effects 的相容性，有的會覆寫 transform 導致視差失效。版型本身也可以從 Divi Cloud 雲端版型庫 拉已經配好視差的現成版型再微調，省得從零刻。
模糊、透明、旋轉、縮放這四種點綴型效果
這四種效果都從同一個 Scroll Effects 面板設定，分別對應 Blur、Opacity、Rotate、Scale 四個維度。它們的角色是點綴視線、引導點擊，讓圖片進畫面時由失焦收攏成清晰、或讓按鈕隨滾動微微放大。不適合整頁到處用，否則動態會失去重點，使用者反而抓不到你要他看哪裡。
模糊加透明是最常見的進場組合。圖片或文字從模糊淡入到清晰，模擬相機對焦的過程，適合放在第一次進入視野的元素上。搭配 Lazy Loading 時要小心載入順序，圖片還沒載完就觸發模糊漸變，使用者會看到空白然後突然清晰，體驗很差；這類效果建議只用在首屏下方、確定會載入的元素上，設定邏輯可對照 Lazy Loading 延遲載入指南。
這四種效果的角色分工很清楚：旋轉適合單一裝飾元素，全頁旋轉會讓人頭暈；縮放適合功能性元素，例如按鈕引導點擊；觸發區間用 Scroll Effects 的起始與結束百分比控制，避免一進畫面就動到底。共通原則是一個版面挑一種點綴效果就夠，混用模糊加旋轉加縮放，看起來像炫技而不是設計。
旋轉效果是最容易被濫用的。它的視覺衝擊強，但只要超過一個模組在旋轉，整個版面就會失去穩定感。比較穩的原則是：旋轉只用在純裝飾元素上，例如一個小小的幾何圖示或裝飾性 icon，而且旋轉幅度不超過 15 度。縮放則相反，它適合用在功能性元素上，例如 CTA 按鈕隨滾動微微放大、引導使用者點擊，這是合理的視覺引導。如果你在做 CTA，CTA 行動呼籲按鈕設計 有更完整的設計原則可以對照。
設定技巧上，用 Scroll Effects 的起始與結束百分比控制觸發區間很重要。預設值通常是元素進入視窗到離開視窗的全程，但這樣往往一進畫面就動到底，沒有緩衝。把起始點設在元素進入視窗的 20% 處、結束點設在 80% 處，讓動態集中在中間段落，進場與離場時保持穩定。這個小調整對體驗的影響比想像中大，如果你還在摸索整體的排版節奏，排版設計實戰技巧 能幫你建立動靜之間的直覺。
點綴型效果的本質是克制。若對整體動態風格還在摸索，不妨在進 Divi 前先用設計工具把動態節奏想清楚，建立對「適度動態」的直覺，避免一進編輯器就亂開參數。
手機版與效能：視差在手機上為什麼常破版，以及怎麼救
多數行動瀏覽器基於省電與效能考量會停用 background-attachment:fixed，導致 CSS 視差在手機上失效或破版。建議做法是在 Divi 的 Responsive 分頁針對手機停用部分動態效果，並搭配圖片壓縮、延遲載入與快取外掛，讓視差只留在桌面版呈現。這屬於正確的工程選擇，妥協在這裡是必要的。
行動版限制的根源在瀏覽器規格。根據 MDN web docs 的說明，行動瀏覽器對 fixed 背景的支援極為有限，iOS Safari 與多數手機瀏覽器會忽略這個屬性，這是為了避免固定背景在觸控捲動時造成的效能問題。所以當你在桌面把 CSS 視差調得很漂亮，切到手機一看卻完全靜止，這屬於瀏覽器本來就不支援的結果，不是設定錯誤。True Parallax 因為靠 JS 計算，在手機上仍可運作，但容易頓挫，要不要保留得實測決定。
把這件事放進 Google 的索引邏輯裡會更有感。Google 已於 2023 年 10 月 31 日宣布行動優先索引（mobile-first indexing）完成，所有可在行動裝置運作的網站都改由行動爬蟲優先檢索。[來源：Google Search Central Blog〈Mobile-first indexing is here〉 https://developers.google.com/search/blog/2023/10/mobile-first-is-here 2023-10-31] 換句話說，Google 看到的你的網站主要就是手機版。手機版破版或頓挫，等於 Google 看到的版本就是壞的，這比桌面版的視覺瑕疵嚴重得多。背景視差在手機失效時，留下的往往是一張被裁切或拉伸變形的背景圖，直接拉低行動版的視覺品質與可讀性。
對應的處理分兩層。第一層是 Divi 的 Responsive 設定：在每個模組或區段點響應式圖示，就能針對手機、平板分別關閉 Scroll Effects 或調整強度，比較穩的習慣是手機版一律關閉背景視差、最多保留一個輕量的縮放或淡入。True Parallax 因靠 JS 計算在手機仍可運作但易頓挫，是否保留要實測決定。第二層是效能對策：背景圖壓縮、啟用 Lazy Loading、搭配快取外掛與 CDN，能把 JS 負擔降一大截。手機版的排版邏輯跟桌面差很多，若還沒處理過手機版的整體排序，先看 Divi 手機版排序調整 與 響應式網頁設計 RWD，把基礎打好再談動態。
效能對策的核心是減少 JS 負擔與圖片體積。背景圖壓縮、啟用延遲載入、搭配快取外掛與 CDN，這四件事做完，視差的效能成本會降一大截。WordPress 快取外掛推薦 與 CDN 網站加速原理 可以幫你選對工具；網站速度優化全攻略 則是整體效能的排查框架。如果你用的是舊版 Divi，也建議評估升級，Divi 5 全新介面與效能提升 對動態效果的效能表現更穩定，根據 Elegant Themes 官方 release notes 的說明，新版在渲染流程上做了重構。
CLS 是最容易被忽略的坑。視差與滾動 transform 會動態改變元素位置，如果元素位移幅度大，瀏覽器計算累積版面位移時就會把這些算進去，CLS 分數自然變差。CLS 是 Google Core Web Vitals 的三大指標之一，分數差會直接影響搜尋排名的體驗評分。實務上在 Search Console 的 Core Web Vitals 報表裡持續觀察前後變化，發現異常就回頭檢視是哪個視差或 transform 造成的。
視差如何透過 Core Web Vitals 間接影響排名
視差本身不會被 Google 直接扣分，但它帶來的副作用，也就是較大的背景圖、較多的 JS 計算、行動版的版面位移，會拉高 LCP、拖慢 INP、讓 CLS 變差，而這些正是 Core Web Vitals 的評分項。判斷原則很單純：動態效果越少、圖越小、JS 越輕，分數越穩。視覺不能凌駕體驗，更不能凌駕排名。
Core Web Vitals 之所以會反映在搜尋結果，是因為 Google 已把它正式納入排名訊號。根據 Google Search Central Blog 的官方公告，Google 在 2020 年宣布引入新的頁面體驗排名訊號，把 Core Web Vitals 與行動裝置相容性、HTTPS、侵入性插頁等既有訊號合併評估，這就是視差造成的 LCP、INP、CLS 波動最終會回頭影響排名的根本原因。[來源：Google Search Central Blog〈Evaluating page experience〉 https://developers.google.com/search/blog/2020/05/evaluating-page-experience 2020-05-28]
直接影響有限的原因是 Google 的排名演算法不會因為「這個網站有視差」就扣分，它評估的是使用者體驗指標。但間接影響很明確：大圖加 JS 視差會拉高 LCP，因為最大內容繪製的元素可能就是那張還在載入的背景圖；滾動動畫會拖慢 INP，因為主執行緒被 JS 占住，使用者的互動回應變慢；位移變化會推高 CLS，因為元素位置一直在動。這三個指標的官方定義與計算方式，可以參考 Google web.dev 的 Core Web Vitals 文件，這是最權威的來源。
| Core Web Vitals 指標 | 視差的影響路徑 | 影響程度 | 緩解方式 |
|---|---|---|---|
| LCP（最大內容繪製） | 大張背景圖拖慢首屏繪製 | 高 | 壓圖、優先載入、改 CSS 視差 |
| INP（互動到下一次繪製） | JS 視差占用主執行緒 | 中高 | 減少 Scroll Effects 模組數 |
| CLS（累積版面位移） | transform 改變元素位置 | 中 | 限制位移幅度、預留空間 |
量測工具用 PageSpeed Insights 與 Search Console 的 Core Web Vitals 報表。前者看單一網址的即時分數，後者看整站的長期趨勢。如果你的站還沒接上報表，先照 Google Search Console 安裝步驟 把網站驗證完成，Core Web Vitals 的整站資料才會開始累積。比較穩的做法是在加視差前先記一組基準分數，加完再測一次，如果 LCP 退步超過合理範圍，優先砍掉那個視差。這個「前後對照」的習慣比任何理論都管用。Core Web Vitals 優化實戰 有完整的指標解讀與優化流程可以對照。
優化的順序很重要：先壓圖、再上快取與 CDN、最後才檢討是否刪減動態效果。很多人一看到分數差就直接砍視差，但問題往往出在那張沒壓縮的大體積背景圖。把圖壓到合理大小、上 CDN、裝好快取外掛，分數可能就回到綠色，根本不用動視差。這個優先順序的核心邏輯是先解決最大的瓶頸，再談微調。
講到底，視差跟 SEO 的關係很直接：視差本身不會被扣分，被扣分的是它帶來的大圖、JS 和位移。一個只在 hero 用、圖壓到 200KB 以內、手機版關掉背景視差的配置，Core Web Vitals 幾乎不受影響；同樣的版面換成全頁 True Parallax、圖沒壓、手機沒處理，LCP、INP、CLS 三個指標會一起變差。問題出在配置，出在視差這個功能本身的並不多。
視差拖慢 LCP 不只是分數變難看，還會直接折損轉換。Google web.dev 整理的案例顯示，Vodafone 把 LCP 改善 31% 後，銷售增加了 8%，這說明首屏繪製速度與商業成果是連動的；另一個案例 redBus 改善 INP 之後，銷售增加了 7%。如果你的 hero 視差正把那張最大內容繪製的背景圖往後拖，影響的不會只是 Core Web Vitals 分數。[來源：web.dev (Google)〈Why does speed matter?〉 https://web.dev/articles/why-speed-matters 2026]
常見問題與故障排除：視差沒反應、破版、效果太重的解法
最常見的三種故障：設了背景視差但沒動、手機上完全靜止、效果太重導致整頁卡頓。第一種通常是背景覆蓋方式沒設或被快取外掛擋掉 JS；第二種是行動瀏覽器停用 fixed 背景，屬正常現象；第三種是 JS 視差過多或背景圖太大。逐一排查快取、外掛衝突、背景圖尺寸與 Responsive 設定，通常能解決八成問題。
沒反應是初學者最常遇到的狀況。排查順序是這樣的：先確認背景圖覆蓋方式設成 Cover，沒設的話圖片不會填滿、視差也看不出效果；再清除 Divi 的內建快取與瀏覽器快取；然後檢查是否裝了 JS 延遲載入類的外掛，這類外掛有時會把視差腳本一起延遲掉，導致效果不觸發。若用的是 必裝的 Divi 外掛清單 裡的最佳化外掛，要特別留意它們的 JS 處理設定。
外掛衝突是最難抓的一類。症狀通常是桌面正常、某一種裝置異常，或是清除快取後短暫正常、過一陣子又壞。排查方法是逐一停用最近安裝的外掛，每停一個就測一次視差，找到元兇再決定要換掉它還是調整設定。這個過程很枯燥但必要，沒有捷徑。如果你裝的是子主題或從市集抓的擴充，也要把這些納入排查範圍。
效果太重的解法核心是「減量」。一個畫面同時做 Scroll Effects 的模組不要超過三個，背景圖壓到 200KB 以內，啟用延遲載入讓非首屏的圖晚點載。這三件事做完，卡頓感會明顯改善。如果還是卡，就代表你的伺服器或主題本身效能已經到極限，這時要回頭看整體架構，繼續在視差上糾結意義不大，做一次完整的效能體檢通常就能找到瓶頸。
版本方面，根據 Elegant Themes 官方的說明，新版 Divi 在渲染與動態效果的效能表現上比舊版更穩定，如果你還在用兩三年前的版本，升級本身可能就解掉一半的怪問題。不過升級前記得先備份，並確認你用的第三方擴充模組與子主題有支援新版，否則升級完反而出現新的相容性問題。
還有一類隱形故障值得單獨提：背景視差在桌面正常、平板也正常，唯獨某一個解析度區間破版。這通常是背景圖的長寬比跟 Section 的高度不匹配。Cover 模式會把圖片放大填滿，當 Section 又高又窄時，圖片的左右兩側會被裁掉一大塊；當 Section 又寬又矮時，上下會被裁掉。解法是挑一張與目標 Section 長寬比接近的背景圖，或者在背景圖四週預留足夠的安全邊距。若真無法換圖，可以改用 contain 模式或調整 Section 高度來遷就圖片，這兩種都是務實的折衷。
視差的版面配置原則與品牌調性對應
設定與故障排除都講完後，真正決定成敗的觀念只剩一個：視差的設計難點在於會不會挑與會不會收。一個網站用 1 到 2 個重點版面做視差就夠，全頁到處滾動不只拖慢載入，還會讓使用者抓不到內容重點。知道什麼時候不動，往往比知道怎麼動更難。
挑選視差版面時，可用三個判準：這個版面是不是網站的視覺焦點（例如 hero）、這個版面有沒有敘事結構（例如品牌故事）、這個版面的動態會不會干擾閱讀（例如長文就不要）。三個都成立才放視差，否則保持靜止。這個判準看似保守，但它能幫你避開八成以上的破版與效能問題。如果你在規劃整站設計，網頁版面設計完全攻略 與 網頁排版設計範例 能幫你釐清哪些版面該是焦點。
視差也該配合整體的品牌調性。科技感重的品牌適合圖層視差的冷靜錯位；溫暖的故事型品牌適合背景視差的緩慢推移；電商或轉換導向的網站則適合縮放引導點擊。把視差當成品牌語言的一部分，而不是裝飾。品牌官網設計全攻略 與 作品集網站設計指南 有更多把動態融入品牌的方法。
若同時在比較不同架站工具，Divi 的視差功能相對完整但不是唯一選擇。Elementor、Bricks Builder、Gutenberg 區塊編輯器都能做到類似效果，效能取向的需求可優先考慮後兩者；透過 WordPress 頁面編輯器比較 能進一步決定哪個工具更適合你的視差需求。
排版基礎也會影響視差的最終呈現。響應式骨架（RWD 或 AWD 的取捨）決定了視差在不同裝置上的容錯空間；近年流行的 Bento Grid 版式跟圖層視差搭配起來效果特別好。至於價目表、部落格、3C 購物網站或一頁式品牌網站等特定類型，視差的用法會跟著版面結構調整，動態背景上的文字也務必確認對比足夠、依然可讀。
視差終究只是整體網站設計的一環。放對位置、用對強度、在行動版收對邊界，它會讓網站更有質感；放錯了，它就是拖垮速度與排名的元兇。Divi 把參數都開給你，但要不要開、開多強、開在哪幾個版面，這些決定只能你自己做。
視差效果決策矩陣：依版面目的與效能預算挑類型
前面的設定講了很多「該怎麼開」，這一段反過來給你一個挑選的框架。把版面目的（強調深度 vs 引導點擊）與效能預算（寬鬆 vs 緊縮）當成兩個軸，所有視差效果都能落進四個象限。先決定你的版面落在哪一格，再回頭看對應的效果類型，能省下大量試錯的時間。
| 象限 | 版面目的 | 效能預算 | 推薦效果 | 典型版面 |
|---|---|---|---|---|
| 第一象限 | 強調深度 | 寬鬆 | True Parallax 背景視差 | 品牌首頁 hero、故事頁開場 |
| 第二象限 | 強調深度 | 緊縮 | CSS 背景視差或景深分層圖層視差 | 作品集、Bento Grid 區塊 |
| 第三象限 | 引導點擊 | 寬鬆 | 縮放加淡入進場組合 | CTA 區塊、定價方案 |
| 第四象限 | 引導點擊 | 緊縮 | 單一裝飾元素旋轉或淡入 | 長文章節分隔、頁尾 icon |
這個矩陣的用法是先做減法。把你想動的每個版面依目的與預算填進對應象限，你會發現大多數版面其實落在第四象限（引導點擊、預算緊縮），這時只需要一個輕量的淡入或旋轉就夠，不需要動到背景視差。真正需要動用背景視差或景深圖層視差的，通常只有首頁 hero 與故事頁開場兩個版面，這也呼應前面「一個網站用 1 到 2 個重點版面做視差就夠」的原則。矩陣的作用是幫你把資源集中到最有回報的版面上，把省下來的預算與效能留給效能臨界點更敏感的功能。
效能預算怎麼估？一個務實的方法是看你的伺服器規格與背景圖體積。如果你的主機是入門級共享主機、背景圖又沒壓縮，就歸在「緊縮」；如果是 VPS 或專屬主機、圖也壓到 200KB 以內，才算「寬鬆」。把這個判斷寫下來再對照矩陣，能避免「桌面好看、手機崩潰」的落差，因為你一開始就排除了效能不允許的選項。
以這類一頁式品牌官網為例，把矩陣套到實際版面會看得更具體。常見的狀況是首頁 hero 落在第一象限（強調深度、預算相對寬鬆），中段作品集落在第二象限（強調深度、預算緊縮），頁尾 CTA 落在第四象限（引導點擊、預算緊縮）。依這類站的典型表現，hero 用 True Parallax 背景視差搭配一張壓到約 180-220KB 的背景圖，桌面 LCP 大概落在 2.4-3.2 秒區間；若同時在 hero 再疊兩到三個 Scroll Effects 模組，LCP 往往會被推到約 3.8-4.6 秒，INP 在低階手機上也會開始出現可感知頓挫。換成第二象限的緊縮做法，hero 改 CSS 視差或單層景深圖層視差、作品集只留一個淡入進場，三個指標通常都能壓回綠色區間。這裡的決策角度很單純：先把每個版面填進象限，預算緊縮的版面就直接排除背景視差這個選項，不必在效能不允許的地方硬上。要誠實提醒的是，前述秒數範圍是這類站點的典型表現幅度，實際數字會隨主機規格、背景圖長寬比、第三方外掛數量而浮動，不是每個站套同一組參數就會得到一樣的結果；少數情境下即便照矩陣收斂，若主機本身已臨近資源上限，LCP 仍可能卡在橙色區間無法回到綠色，這時瓶頸出在主機與主題而不在視差，繼續刪動態效果的邊際效益很低，得回到整體效能體檢。
進階技巧：用自訂 CSS 補 Divi 原生設定的不足
Divi 的 Visual Builder 把參數都開成可調滑桿，但有些細節它沒開出來，這時可以靠自訂 CSS 補強。最常見的兩個需求是緩動曲線與捲動平滑度，這兩者直接決定視差看起來是高級還是生硬。
- 背景圖優先載入：在 hero 區段的自訂 CSS 加 background-image 的 preload 處理，讓背景圖提早進入下載佇列，避免它變成 LCP 的絆腳石
- transform 的 will-change：對做 Scroll Effects 的模組加上 will-change: transform，提示瀏覽器把它獨立到 GPU 圖層，減少主執行緒負擔
- 緩動曲線微調：用 cubic-bezier 替換預設的線性曲線，進場與離場更自然，看起來不像機械式位移
- prefers-reduced-motion 尊重：加上媒體查詢，讓勾選「減少動態」的使用者自動關閉視差，這是基本無障礙禮貌
- sticky 與視差分工：頁首走 sticky，hero 走視差，兩者用不同的 z-index 與 transform 通道，避免互相覆寫
其中 prefers-reduced-motion 這一項特別值得強調。作業系統層級的「減少動態」設定是為了前庭功能敏感的使用者，他們對持續位移的畫面會感到暈眩。在 CSS 加一段媒體查詢，把所有 Scroll Effects 在這個設定下停用，等於把你的網站對這群使用者打開。這不只是無障礙合規，也是把動態效果用在對的人身上的成熟表現。Google 的無障礟評估也把這項納入考量，做了對 SEO 與體驗都有加分。
will-change 則是效能優化的雙面刃。加上它能讓瀏覽器預先為該元素建立 GPU 圖層，滾動順暢度提升；但加太多反而會吃掉顯示記憶體，尤其在中階手機上。比較穩的做法是只對那一兩個真正在動的模組加 will-change，其餘保持預設。Divi 原生沒有這個開關，要靠自訂 CSS 注入，效果立竿見影。
視差與其他動態效果的搭配清單
一個網站通常不只有視差，還有懸停、輪播、Lottie、頁首 sticky 等動態元素。這些效果加在一起，如果沒有分工，就會互相搶戲。把常見的動態組合整理出來，並標註它們跟視差的搭配建議，能幫你在規劃整體動態時心裡有譜。
| 動態效果 | 觸發時機 | 與視差的搭配建議 |
|---|---|---|
| 懸停特效 | 滑鼠移到元素 | 互補：視差管進場，懸停管互動，不衝突 |
| 圖片輪播 | 自動或手動切換 | 擇一：同一版面避免兩者並存，以免動態過載 |
| Lottie 動畫 | 載入或迴圈播放 | 分區：Lottie 放裝飾區，視差放背景區 |
| 頁首 sticky | 滾動時固定 | 分工：sticky 箊首，視差管 hero 背景 |
| 彈跳視窗 | 點擊或時間觸發 | 獨立：彈窗開啟時暫停視差計算，避免背景還在動 |
這份清單的核心原則只有一句話：同一個版面的動態要有主從。視差是主、其他效果是從，或者反過來，絕對不能讓所有效果同時搶最大聲。如果你的 hero 已經有背景視差，就不要再疊一個自動播放的輪播，否則使用者眼睛不知道該看哪裡。把動態拆到不同版面、各自當主角，整體節奏才會順。
視差效果上線前檢查表
把前面散落的重點收攏成一份上線前的核對清單，每次做完一個視差版面照著走一遍，能攔下大部分常見的破版與效能問題。
- 桌面檢查：背景視差有速度差、圖層視差模組不超過三個、旋轉幅度在 15 度以內
- 行動版檢查：背景 CSS 視差已關閉或改 True Parallax、Scroll Effects 針對手機減量
- 圖片檢查：背景圖壓到 200KB 以內、寬度至少 1920px、主體在圖片正中保留安全邊距
- 覆蓋檢查：Background Size 設 Cover、Repeat 設 No Repeat、文字對比度足夠
- 效能檢查：Lazy Loading 已啟用、快取外掛已開、CDN 已接、JS 延遲外掛未擋掉視差腳本
- Core Web Vitals 檢查：加視差前後 LCP、INP、CLS 有記錄對比、退步明顯就回頭砍效果
- 無障礙檢查：prefers-reduced-motion 媒體查詢已加、背景上文字依然可讀
- 相容性檢查：第三方擴充模組未覆寫 transform、子主題未衝突、Divi 已更新到較新版本
這份檢查表的價值在於把它變成例行流程。視差的問題很少出在「不會設定」，多數出在「漏掉某一個小地方」，例如忘了關手機背景視差、忘了壓圖、忘了對比檢查。一份照著走的清單，能把你從「每次都重新踩雷」變成「每次都穩定過關」。如果你是團隊協作，這份清單也適合當成交接文件，讓接手的人知道每個視差版面該驗哪些項目。
常見問題
Divi 背景視差怎麼設定？CSS 視差跟真實視差有什麼不同？
在區段或資料列的背景設定裡開啟 Use Parallax Effect，Parallax Method 二選一。CSS 版本走 background-attachment:fixed，幾乎不吃 JS，但手機瀏覽器多半會把它當沒這回事；True 版本靠 JS 即時計算位移，立體感清楚，代價是主執行緒負擔與行動版的頓挫風險。選擇依版面目的與效能預算而定，不能只看立體感。
Divi 視差效果在手機上會不會破版？
會，而且通常是 CSS 視差。行動瀏覽器為了省電與效能會停用 background-attachment:fixed，導致 CSS 視差失效或破版，這屬於規格選擇而非 bug。處理方式是在 Divi Responsive 分頁針對手機關閉部分 Scroll Effects，或改用 True Parallax 後實測決定是否保留。
Divi 視差效果會拖慢網站速度嗎？影響 SEO 嗎？
視差本身不會被 Google 直接扣分，但它帶來的大背景圖、JS 計算、版面位移會拉高 LCP、拖慢 INP、推高 CLS，這三項正是 Core Web Vitals 的評分指標，而 Core Web Vitals 已是排名訊號之一。做法是先壓圖、上快取與 CDN，最後才檢討是否刪減動態效果，分數退步明顯就優先砍掉該視差。
一個網站適合用幾個視差效果？
抓在兩個以內，集中在首頁 hero 和一個有敘事的區塊最保險。每多放一個視差版面，就多一份大圖與 JS 的成本，Core Web Vitals 也跟著承擔，ROI 通常不划算。可對照決策矩陣，依版面目的與效能預算把資源集中到回報最高的版面。
怎麼判斷一個版面該不該放視差？
用三個判準檢查：這個版面是不是網站的視覺焦點、有沒有敘事結構、動態會不會干擾閱讀。三個都成立才放，否則保持靜止。這個判準看似保守，卻能避開八成以上的破版與效能問題。