如何使用 Divi 的滾動效果動畫視差背景圖像

將滾動效果與視差背景圖像相結合可以為您的訪問者創造出非常神奇的設計。 由於當用戶向下滾動頁面時，視差效果已經使圖像處於運動狀態，因此添加額外的滾動效果（如水平運動和旋轉）可以真正使設計與眾不同，並為更具創意的佈局打開大門。

在本教程中，我們將介紹如何使用 Divi 的滾動效果為視差背景圖像設置動畫。 我們將在多個文本模塊上使用相同的背景圖像來設計用於顯示一小段文本的獨特佈局。

讓我們開始吧。

搶先看

免費下載動畫視差背景圖像佈局

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

下載文件

免費下載

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

下載

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

要將佈局導入您的頁面，只需提取 zip 文件並將 JSON 文件拖到 Divi Builder 中。

讓我們進入教程，好嗎？

你需要什麼開始

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

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

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

使用 Divi 的滾動效果創建動畫視差背景圖像

添加列

首先，創建一個單列行。

創建文本模塊

然後在列中添加一個文本模塊。

文字內容

在正文內容中添加字母“p”。

將視差背景圖像添加到文本模塊

接下來，將視差背景圖像添加到文本模塊，如下所示：

• 背景圖片：插入圖片
• 使用視差效果：是
• 視差方法：CSS

設計文本

在設計選項卡下，更新以下內容：

• 文字字體：蒙特塞拉特
• 文字字體樣式：TT
• 文字文字顏色：#ffffff
• 文字文字大小：100px（桌面），70px（手機）
• 文字字母間距：5px（手機）
• 文本行高：1em
• 文本對齊：居中
• 填充：頂部 250 像素，底部 250 像素

填充是創建暴露視差背景圖像所需的必要高度。

行設置

現在我們的文本模塊已經完成，打開行設置並更新以下內容：

• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 寬度：100%

第 1 列設置

然後單擊打開列設置。

在高級選項卡下，更新以下滾動效果：

在水平運動效果選項卡下...

• 啟用水平：是
• 起始偏移：-2（在 0% 視口處）
• 中間偏移：0（40%-60%）
• 結束偏移：-2（100%）

在旋轉效果選項卡下...

• 啟用旋轉：是
• 開始旋轉：20 度（在 0% 視口處）
• 中間旋轉：0度（40%-60%）
• 結束旋轉：-20deg（100%）

創建第 2 列

即使我們從一列佈局開始，我們也將創建總共 5 列。 複製列及其所有內容和設置以創建設計所需的下四個列會更容易。

複製整個第一列（使用文本模塊）以創建第二列。

更新第 2 列滾動效果

然後更新第 2 列的滾動效果，如下所示：

在旋轉效果選項卡下...

• 起始旋轉：-20deg
• 結束旋轉：20度

創建第 3 列

要創建第 3 列，請複制第 2 列。

更新第 3 列滾動效果

然後按如下方式更新第 3 列設置：

在水平運動效果選項卡下...

• 啟用水平運動：否

在旋轉效果選項卡下...

• 起始旋轉：20度
• 結束旋轉：10deg

創建第 4 列

要創建第 4 列，請複制第 2 列，然後將其拖到底部。

更新第 4 列滾動效果

然後打開第 4 列的設置並更新以下內容：

在水平運動效果選項卡下...

• 起始偏移：2
• 結束偏移：2

在旋轉效果選項卡下...

• 起始旋轉：-15deg
• 結束旋轉：20度

創建第 5 列

最後，要創建第 5 列，請複制第 4 列。

更新第 5 列滾動效果

然後按如下方式更新第 5 列設置：

在旋轉效果選項卡下...

• 起始旋轉：15度
• 結束旋轉：-15deg

更新文本模塊字母

接下來，使用內嵌文本選項更改每列中的字母，以便它們共同拼寫“power”一詞。

更新中間文本模塊設計

打開第 3 列中的文本模塊設置並更新以下內容：

• 文字字體：Montserrat Subrayada
• 文字文字顏色：#e0e722
• 文字文字大小：150px（桌面）
• 文本行高：100px

為移動設備更新第一個文本模塊內容

為了在手機上顯示單個文本模塊，我們需要在平板電腦和手機顯示屏上使用以下內容更新第 1 列中的文本模塊：

平板電腦和手機上的正文內容：

<p>po<span style="color: #edf000; font-family: 'Montserrat Subrayada';">w</span>er</p>

更新第 1 列設置

接下來，打開第 1 列的設置並更新以下內容：

• 圓角（桌面）：100% 左上角
• 圓角（平板電腦和手機）：左上角 40%，右下角 40%

在高級選項卡下，將以下自定義 CSS 添加到主要元素的平板電腦顯示中：

width: 100% !important;

這將確保該列跨越平板電腦和手機顯示屏上的行的整個寬度。

隱藏平板電腦和手機顯示屏上的其餘列

現在第 1 列將跨越平板電腦和手機上的行的整個寬度，我們可以隱藏/禁用平板電腦和手機上的其餘列。 為此，請打開第 2-5 列的設置並禁用手機和平板電腦上每一列的可見性。

更新第 5 列設置

然後打開第5列設置，添加一個互補圓角如下：

• 圓角（桌面）：100% 右下角

將背景設計添加到部分

要完成設計，請使用背景設計更新截面設置，如下所示：

• 背景顏色：#e0e722

• 頂部分隔線樣式：見截圖
• 頂部分隔線顏色：#222222
• 頂部分隔線高度：650 像素（桌面）、500 像素（平板電腦和手機）

• 底部分隔線樣式：見截圖
• 底部分隔線顏色：#222222
• 底部分隔線高度：500 像素（桌面）、400 像素（平板電腦和手機）

最後結果

這是桌面上的最終設計。

這是平板電腦和手機顯示屏上的後備設計。

最後的想法

視差背景圖像以真正神奇的方式與滾動效果相結合。 使用視差背景圖像的唯一缺點是缺乏對移動設備的支持，但通過 Divi 提供的響應設置，我們可以輕鬆創建回退。 我希望這個優雅的設計能給你的一天增添一些靈感。

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

乾杯!