如何在 Divi 中創建滾動動畫前後圖像

由於各種原因，許多網站需要顯示前後圖像。 例如，網頁設計公司可以顯示他們建立的網站的前後圖像，而健身網站可以顯示其成功（和健康）客戶的前後畫像。 通常，網站會採用一種簡單的設計，將每張照片彼此相鄰顯示。 在本教程中，我們將通過交互式動畫增強這種傳統設計。

在本教程中，我們將展示如何在 Divi 中創建滾動動畫前後圖像。 通過這種設計，用戶將在向下滾動頁面時看到前後圖像的轉換。 這是吸引用戶向下滾動您的網站並以獨特的方式查看轉換的好方法。 另外，我們可以僅使用 Divi 的內置選項來構建它。 無需自定義代碼或插件！

讓我們開始吧。

搶先看

這是我們將在本教程中構建的設計的快速瀏覽。

免費下載佈局

要了解本教程中的設計，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

下載

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

要將部分佈局導入您的 Divi 庫，請導航到 Divi 庫。

單擊導入按鈕。

在可移植性彈出窗口中，選擇導入選項卡並從您的計算機中選擇下載文件。

然後點擊導入按鈕。

完成後，分區佈局將在 Divi Builder 中可用。

讓我們進入教程，好嗎？

你需要什麼開始

首先，您需要執行以下操作：

1. 如果您還沒有安裝並激活 Divi 主題。
2. 在WordPress中新建一個頁面，在前端使用Divi Builder編輯頁面（visual builder）。
3. 選擇“從頭開始構建”選項。

之後，您將有一個空白畫布開始在 Divi 中進行設計。

在 Divi 中創建滾動動畫前後圖像

現在我們準備開始在 Divi 中創建動畫前後圖像的滾動。 為此，我們首先需要創建一個不會在移動設備上換行（或中斷）的兩列行。 每列還需要隱藏溢出，以便前後圖像將滑出和滑入以在滾動時在每列中查看。 一旦列就位，我們將向每一列添加我們的圖像，並為每一列添加樣式和水平滾動動畫。 一旦到位，我們將在圖像上方添加前後標題文本。

第 1 部分：創建兩列行

首先，使用前端的 Divi Builder 將兩列行添加到默認的常規部分。

行設置

打開行設置並更新以下內容：

• 天溝寬度：1
• 寬度：100%
• 最大寬度：900 像素（桌面）、700 像素（平板電腦）、300 像素（手機）
• 填充：0px 頂部，0px 底部

注意：使用像素長度單位設置行的最大寬度對於此設計的工作至關重要。 記住這些值，因為每個圖像的寬度和我們稍後添加的水平滾動動畫將取決於行的最大寬度。

要確保列不會在移動設備上換行或分成單列佈局，請打開高級選項卡並將以下自定義 CSS 添加到主元素：

display:flex;
flex-wrap:nowrap;

列設置

接下來，打開第 1 列的設置並更新設計設置，如下所示：

• 填充：5vw 頂部，5vw 底部
• 右邊框寬度：2px
• 右邊框顏色：#666666

在“高級”選項卡下，按如下方式更新溢出：

• 水平溢出：隱藏
• 垂直溢出：隱藏

請記住，每一列都需要隱藏溢出，以便前後圖像將滑出和滑入以在滾動時在每一列中查看

接下來，打開第 2 列的設置並更新設計設置，如下所示：

• 填充：5vw 頂部，5vw 底部
• 左邊框寬度：2px
• 左邊框顏色：#666666

注意：每列的左右邊框創建中間線，將成為圖像過渡前後的中心點。

然後將此列的溢出更新為隱藏。

• 水平溢出：隱藏
• 垂直溢出：隱藏

第 2 部分：創建前後圖像

兩列佈局到位後，我們現在可以添加用於前後動畫的圖像。 我們實際上總共會有三個圖像。 在第 1 列中，我們將有一個留在後面（沒有動畫）的前圖像的“陰影”版本，我們將有最終會在滾動時向右移動的前圖像（黑白）。 在第 2 列中，我們將在滾動時從左側滾動到視圖中的後圖像。

添加三個圖像

要創建第一個圖像，請在第 1 列中添加一個新的圖像模塊。

然後將圖像上傳到模塊。

在設計選項卡下，更新以下寬度選項：

• 寬度：100%
• 最大寬度：448 像素（桌面）、348 像素（平板電腦）、148 像素（手機）

注意：每個最大寬度尺寸都由行的一半減去 2px 邊框確定。 因此對於桌面，該行的最大寬度為 900 像素。 行的一半是 450px。 然後去掉邊框增加的2px，你得到448px。

要創建接下來的兩個圖像，請將圖像模塊複製三次。

然後將其中一張圖像移動到第 2 列。

第 3 部分：為圖像添加自定義樣式和滾動動畫

圖像“陰影”樣式之前

要為之前的圖像設置“陰影”樣式，請打開第 1 列中第一張（或頂部）圖像的設置並更新過濾器選項，如下所示：

• 飽和度：0%
• 不透明度：10%

要確保陰影圖像直接位於之前的圖像之後，請按如下方式更新圖像的位置：

• 位置：絕對
• 垂直偏移：5vw

注意：垂直偏移應等於列的頂部填充，以便圖像保持垂直對齊。

圖像樣式和滾動設置之前

接下來，打開第 1 列中第二張圖像的設置（現在位於陰影圖像上方）並更新飽和度過濾器，使其成為圖像的黑白版本，如下所示：

• 飽和度：0%

在高級選項卡下，選擇滾動變換效果下的水平運動選項卡並啟用水平運動。 然後更新以下內容：

為桌面設置水平運動...

• 起始偏移量：0（在 30% 處）
• 中偏移：2.26（45%）
• 結束偏移：4.52（60%）

為平板電腦設置水平運動...

• 起始偏移量：0（在 30% 處）
• 中偏移：1.76（45%）
• 結束偏移：3.52（60%）

為手機設置水平運動...

• 起始偏移量：0（在 30% 處）
• 中偏移：0.76（45%）
• 結束偏移：1.52（60%）

注意：請記住，偏移值以像素為單位設置。 值 1 等於 100px。 所以 4.52 的值實際上是 452px。 所以在桌面上的水平動畫結束時，圖像將向右移動 452px。 452px 由行的一半 (450px) 加上 2px 邊框決定。

圖像滾動設置後

最後，使用以下水平運動滾動效果更新第 2 列中的最終圖像：

為桌面設置水平運動...

• 起始偏移：-4.52（30%）
• 中偏移：-2.26（45%）
• 結束偏移：0（60%）

為平板電腦設置水平運動...

• 起始偏移：-3.52（30%）
• 中偏移：-1.76（45%）
• 結束偏移：0（60%）

為手機設置水平運動...

• 起始偏移：-1.52（30%）
• 中間偏移：-0.76（45%）
• 結束偏移：0（60%）

為滾動測試添加部分邊距

到目前為止，在查看我們的滾動動畫之前，我們需要為該部分添加一些臨時的頂部和底部邊距，以便我們有一些空間可以在實時頁面上滾動。

打開部分設置並更新以下內容：

• 邊距：80vh 頂部，80vh 底部

現在在實時頁面上查看結果。

第 4 部分：創建前後標題文本

為了完成設計，我們需要在每個圖像上方創建前後標題文本。

新行

為此，請創建一個新的兩列行。

從包含我們的圖像的前一行複制行樣式。

然後將行樣式粘貼到新行。

添加文本模塊

完成該行後，將其拖入包含圖像的行的頂部。 然後將一個新的文本模塊添加到新行的第 1 列。

然後用以下內容替換正文：

<h2>Before</h2>

在設計選項卡下，更新以下 H2 標題樣式：

• 標題 2 字體：Roboto
• 標題 2 字體樣式：TT
• 標題 2 文本對齊：居中
• 標題 2 字母間距：2px

要為後圖像創建標題，請複製文本模塊並將其粘貼到同一行的第 2 列中。

然後將 H2 文本更新為“之後”而不是“之前”。

就是這樣！

最後結果

這是最終結果。

這是它在平板電腦和手機顯示屏上的樣子：

這裡還有一些示例，說明您只需替換所使用的圖像即可完成哪些操作。

最後的想法

在本教程中，我們向您展示了使用 Divi 構建自己的自定義滾動動畫前後圖像是多麼容易。 這種設計的優點在於它很容易複製更多的前後圖像示例。 您需要做的就是複制該部分並更新圖像！ 請記住，為了獲得最佳效果，您需要保持這些圖像的大小相同，以便它們在動畫過程中保持對齊。

希望這將為您的下一個可能需要展示前後圖像的項目提供額外的設計提升。

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

乾杯!