在 Divi 中使用視差的終極指南

已發表: 2017-07-25

試圖為視差找到合適尺寸的圖像可能有點令人沮喪。該圖像作為標準背景圖像看起來可能很棒，但是一旦您選擇“使用視差效果”，圖像就會被放大，看起來什麼都不對。為避免日後出現這種情況，您需要了解視差是什麼以及將圖像置於視差模式時會發生什麼。

今天，我將深入研究視差與 Divi 的工作方式。我會準確地解釋當你使用兩種不同的視差方法時會發生什麼，什麼尺寸的圖像最好，我什至會加入一些自定義的 css 技巧來按照你想要的方式定位你的圖像。

我們走吧。

什麼是視差？

在網頁設計方面，視差是一個術語，用於描述使用一種二維動畫提供逼真的距離和運動感知的效果。這是通過改變網頁上不同元素的滾動速度來實現的，以在查看固定點時產生距離錯覺。該技術在網絡以外的地方已經存在一段時間了。還記得超級馬里奧兄弟嗎？如果您曾在 80 年代玩過電子遊戲（Nintendo NES），那麼大多數遊戲都使用這種技術僅使用 2d 圖像來給人一種運動的印象。最前面的項目比背景中的樹/山/雲移動得更快。從而創造出更逼真的運動。

這種效果很像 Divi 中的 True Parallax 方法。除了運動是垂直的而不是水平的。

了解視差如何與 Divi 配合使用

使用 Divi，Parallax 非常容易部署在任何部分、行、列或模塊中的任何背景圖像上。您所要做的就是將視差效果選項設置為“是”，然後選擇您的視差方法（CSS 或真實視差）。

CSS 方法

CSS 方法是您可以為視差效果選擇的兩種方法之一。您可以通過在您的網站上測試此方法來猜測發生了什麼。它被稱為 CSS 方法，因為它只使用 CSS 來創建效果。此方法使用 CSS 將背景圖像固定到位，同時頁面上的其他元素正常滾動。這給人的印像是內容在背景圖像前面移動。

真實視差法

第二種方法稱為真視差。它被稱為“真實”可能是因為它體現了視差效應的傳統觀念。此方法使用 CSS 和 JavaScript 創建比頁面上其他元素稍慢的滾動運動。這是一種更栩栩如生的運動表現，因為它在背景中緩慢移動的圖像與前部快速移動的元素之間產生了距離感。

在 Divi 中啟用視差會發生什麼？

如果您不了解幕後發生的事情，這可能會令人沮喪。因此，當視差被激活時，準確地知道圖像發生了什麼是有幫助的。

選擇 CSS 方法時會發生什麼？

當選擇 CSS 視差時，圖像將被包裹在一個新的 div 中，其絕對位置跨越瀏覽器窗口的整個大小。以下是在 Divi 中執行此操作的 CSS 類和代碼片段：

.et_parallax_bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}
/*** This sets the image to fixed when using the CSS method ***/
.et_pb_section_parallax .et_pb_parallax_css, .et_pb_slides .et_parallax_bg.et_pb_parallax_css {
    background-attachment: fixed;
}

由於背景大小設置為“覆蓋”，高度和寬度為 100%，因此圖像將始終“覆蓋”其容器的每個部分。在這種情況下，容器是瀏覽器窗口。這意味著圖像的一部分將隱藏在其他內容部分的後面，因為背景圖像將始終隨著瀏覽器窗口大小而不斷擴大和收縮。

想像一下，這是添加到頁面頂部的標題模塊的常規背景圖像。

圖像的縱橫比是正確的（1920×1080），並且在 1366×766 的屏幕尺寸上觀看時，圖像的大小很好地覆蓋並適合該部分，沒有任何重疊。圖片下方的白色區域是頁面上的其餘內容。

現在這就是當您為圖像選擇視差時會發生的情況。

如您所見，圖像在垂直方向（到達瀏覽器窗口的底部）和水平方向（以保持圖像的縱橫比）展開。黑色方塊代表您的顯示器，因此黑色方塊內的所有內容都是觀看者所看到的。我將底部的白色內容部分設為半透明，以便您可以看到背景圖像隱藏在它後面的位置。當您滾動時圖像保持固定，其他元素在圖像前面上下移動。

選擇真視差法時會發生什麼？

如果您設置了 True Parallax，則圖像將包含在具有相同 CSS 類的新 div 中：

.et_parallax_bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

但是，通過使用一點 JavaScript，圖像的高度和位置是根據瀏覽器窗口的大小和向下滾動頁面時動態設置的。動態添加到背景圖像的兩個值是 height 屬性的 px 值和 transform 屬性的 translate 值。 height 屬性值決定了圖像的高度，而 transform 屬性 translate 值決定了圖像在頁面上根據 x 和 y 軸的精確定位。

這是插入到我的視差背景圖像的圖像標籤中的代碼，我的瀏覽器窗口為 1366×766：

    height: 960.8px;
    transform: translate(0px, 220.5px);

注意 transform 屬性中的兩個數字。這兩個數字控制背景圖像的定位。第一個數字 (0px) 沿 x 軸（水平）定位圖像。由於它設置為 0px，圖像不會被移動。第二個數字沿 y 軸（垂直）定位圖像。由於它當前是 220.5px，這意味著圖像被向下推到頁面 220.5px。

還要注意高度值 (960.8px) 比我的瀏覽器窗口的高度 (766px) 高約 200px。這是為了適應被推送到瀏覽器窗口底部 220.5 像素的圖像。

當選擇 True Parallax Method 時，您可能已經註意到您的圖像比 CSS Method 更容易被放大。這是因為圖像的位置被拉伸了瀏覽器高度的 30%。

還記得我們常規的背景圖嗎？

以下是選擇 True Parallax 後圖像發生的情況（當然是在開始滾動之前）：

如您所見，圖像被拉到瀏覽器窗口底部的上方。這個瀏覽器窗口大約為 1080×700，所以它相當小，但我想向您展示在較小的桌面窗口上發生了什麼。

為什麼真正的視差會拉伸圖像這麼遠？

好吧，我最好的猜測是適應更大的屏幕尺寸。一旦瀏覽器窗口達到 1920×1080 的屏幕尺寸，背景圖像就不再超出窗口底部，並且非常適合。

為什麼 True Parallax 使用 JavaScript？

True Parallax 需要 JavaScript 的主要原因是背景圖像在滾動時需要以與其他元素不同的速度移動。還記得馬里奧兄弟嗎？

使用 True Parallax，如果我增加瀏覽器的大小，高度值也會通過 JavaScript 動態增加，確保我的圖像對於瀏覽器來說總是足夠大。

如果我向下滾動頁面，平移位置值（上例中的 220.5px）會增加，從而將圖像的垂直（y 軸）位置向下移動到頁面上。

如果我向上滾動，平移位置值會減小，將圖像拉回頁面。但是因為滾動時圖像以與其他元素不同的速度被推下和拉起，所以你會得到真正的視差效果。

我應該使用什麼樣的圖像？

如果您希望在您的網站上使用視差效果，選擇正確的背景圖像至關重要。您不希望背景太雜亂或分散注意力。但另一方面，您也不希望它成為無聊的旁注。

以下是為視差選擇正確圖像類型的 5 個一般提示

避免分散照片的注意力。 內容過多的圖像會造成混亂並分散對內容的注意力。
確保您的照片與您網站的主題相匹配。 您的網站應該講述一個故事。此視差圖像（與您的其他圖像一樣）應符合主題。
保持大而簡單。 請記住，您的視差圖像也將在較小的屏幕尺寸上查看。確保照片的細節不會太小，以至於在較小的設備上無法識別。
必要時添加疊加顏色。 有時，一個好的視差圖像會同時具有深色和淺色兩個方面，這可能最終會在滾動時隱藏您的文本。添加深色或淺色疊加層將確保您的文本可以在圖像的任何位置閱讀
讓它變得有趣。 有很多方法可以拍攝照片來解決無聊的事情。花點時間找到一個能吸引觀眾並吸引他們注意力的作品。

您應該使用什麼尺寸的視差背景圖像？

這個回答有點棘手。沒有一種尺寸適合所有視差圖像。事實上，在網頁設計中沒有一種尺寸適合所有的東西，至少在響應式設計出現之後是這樣。但是，即使我可能無法給你一個嚴格的規則，我可以提供一些通用的指導方針，用 Divi 選擇合適尺寸的視差背景圖像。

由於最流行的屏幕尺寸約為 1366×766，我肯定會確保所有背景視差圖像至少是這個尺寸。但由於大顯示器的流行，我會選擇更大的尺寸，如 1920×1080。這將確保用戶在較大的桌面上看到高質量的圖像。

擁有尺寸為 1920×1080 的圖像的問題在於，您很少會有高度為 1080 像素的可見部分。因此，您可以在那些隱藏的圖像底部存錢。

使視差背景圖像看起來正確的有用提示

對於標題和頂部部分

確保您的圖像完全可見且看起來很棒的最簡單方法是使用全寬標題模塊。這樣無論屏幕大小如何，您的背景圖像總是看起來很棒。但是，如果您使用 Fullwidth Header Module 使用視差背景圖像，則可能需要在模塊的頂部和底部添加一些填充以顯示更多圖像。您可以使用 Visual Builder 來完成此操作。轉到標題模塊設置。在高級選項卡下，在主要元素文本框中輸入以下內容：

Padding: 250px 0 250px;

這應該讓你朝著正確的方向前進。

如果您仍然沒有足夠的圖像顯示，我建議您裁剪圖像的頂部，然後再次上傳。這可能會有所幫助。

此外，盡量選擇圖像底部內容不重要的照片，頂部內容更重要的照片。對於標題，您應該只看到視差圖像的頂部 700 像素。

對於常規/中間部分

確保在內容周圍留出足夠的空間以充分暴露背景，以便在該部分到達用戶的中心視點時可以獲得完整的圖片。充分利用填充物。如果您打算使用視差，請不要讓您的用戶感到困惑，而必須上下滾動才能查看圖像。最好第一次展示給他們看。

對於底部部分/頁腳

如果您使用 CSS 方法，您可以期望看到更多背景圖像的底部（取決於您有多少空間）。我會嘗試裁剪照片的底部以顯示這些部分的更多頂部。

如果您使用 True Parallax 方法，您將主要看到圖像的頂部，因此我會將它們視為您的標題。

以下是頁面頂部、中部和底部的 True Parallax 背景圖像示例。

這種類型的橋樑圖像效果很好，因為它在側面有一個很好的焦點，並且圖像的底部沒有頂部那麼重要，因此用戶永遠不會丟失信息。

這是使用 CSS 方法的相同頁面。您可以真正看到背景圖像是固定的並擴展到瀏覽器窗口的事實。它甚至看起來像是一直固定在背景中的相同圖像。

如果您在搜索完完美的圖像、添加必要的填充並對其進行裁剪後仍然不滿意，您可以隨時求助於一些黑客攻擊。

視差圖像黑客：使用自定義 CSS 更改圖像的位置

如果想改變視差背景的位置，可以使用css選擇器“.et_parallax_bg”。這是為視差效果定位圖像的默認 css。

.et_parallax_bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

如果您注意到，默認情況下，css 視差方法的背景位置屬性如下設置為“頂部中心”。但是如果我想改變背景圖像的原始位置，你可以調整 background-position 屬性值。

如果您想將自定義 CSS 壓縮到某個圖像，並且不影響所有視差背景，則需要向您的部分添加一個類，以便我們可以在 css 中確定需要自定義的背景。

轉到“高級”選項卡下的部分設置，然後輸入一個名為“parahacks”的 CSS 類。
現在轉到頁面設置並選擇高級選項卡。

然後使用自定義 CSS 框輸入以下任何自定義 CSS 示例：

如果使用 CSS 方法，您可以通過添加以下自定義 css 使背景圖像垂直居中：

.parahacks .et_parallax_bg {
    Background-position: center center !important;
}

要使背景圖像底部對齊，請添加以下自定義 css：

.parahacks .et_parallax_bg {
    background-position: bottom center !important;
}

要使背景圖像向上移動一定數量的像素，請添加以下自定義 css：

.parahacks .et_parallax_bg {
    background-position: center -150px !important;
}

如果使用 True Parallax 方法，則必須考慮隱藏在底部的圖像的額外 220 像素（或多或少取決於您的瀏覽器高度）。要使背景圖像更垂直居中，您需要使用負像素值調整 background-position 屬性，如下所示：

.parahacks .et_parallax_bg {
    background-position: center -100px !important;
}

要使背景圖像更底部對齊，請添加以下自定義 css：

.parahacks .et_parallax_bg {
    background-position: center -220px !important;
}

特爾；博士？這是主要要點的視頻摘要

訂閱我們的 YouTube 頻道

在結束

我真誠地希望本指南有助於深入了解視差如何與 Divi 一起工作。值得慶幸的是，Divi 在為我們提供視差功能方面幾乎完成了所有繁重的工作。 CSS 方法和 True Parallax 方法都可以創建開箱即用的逼真效果。但是，我們有責任找到正確的圖像並對其進行適當調整，以使它們適用於我們的網站。去吧！我打賭你會創造出驚人的東西。

期待在評論中收到您的來信。

乾杯!