如何在 Divi 中結合動畫和視差以獲得獨特的設計

無論我們是準備一頓飯還是設計一個網站，僅憑原料並不能保證一道美味的菜餚或一個美麗的網站。 正是我們將這些元素結合在一起的程度才產生了所有不同。 在本教程中，我將向您展示如何以您以前從未考慮過的方式結合動畫和圖像視差。 如果您還不知道，動畫是一個內置的 Divi 功能，可以在頁面加載時添加到任何 Divi 元素。 視差也是一個 Divi 選項，允許您在滾動時為背景圖像添加獨特的運動。

今天，我們將使用 Divi 的內置設計設置，以各種創造性的方式結合動畫和視差。 這種組合非常神奇地結合在一起，創建了一個漂亮的動畫視差圖像佈局，當您向下滾動頁面時，這些圖像看起來很棒。

讓我們開始吧！

搶先看

免費下載佈局

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

下載文件

免費下載

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

下載

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

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

讓我們進入教程好嗎？

你需要什麼開始

首先，您需要具備以下條件：

1. 已安裝並激活 Divi 主題
2. 在前端從頭開始構建的新頁面（可視化構建器）
3. 用於模擬內容的圖像。 您可以在 Life Coach Divi Layout Pack 中找到用於本教程的圖像。

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

基本理念

這個設計概念背後的基本思想集中在背景圖像上使用 CSS 視差。 由於 CSS 視差的工作方式，無​​論使用它的元素的大小如何，視差圖像都將保持固定並自動填充瀏覽器窗口。 圖像的固定特性允許您在 Divi 中的多個元素上使用相同的視差圖像，然後使用動畫移動這些元素。 動畫穩定後，使用的視差背景圖像將匹配並在向下滾動頁面時按預期工作。

第 1 部分：創建 Divi 動畫和視差設計（版本 1）

創建一個具有兩列 (1/2 1/2) 行的新部分。

在添加模塊之前，讓我們對部分和行進行一些調整。

更新部分和行設置

首先打開section設置，取出默認padding如下：

填充：0px 頂部，0px 底部

然後打開行設置並為行提供視差背景圖像。

背景圖片：【上傳圖片】
使用視差效果：是
視差方法：CSS

這裡的視差方法必須設置為 CSS 才能使設計工作。

寬度：100%
最大寬度：100%
填充：10vw 頂部，10vw 左，10vw 右

添加具有匹配視差背景的文本模塊

現在我們準備開始將我們的文本模塊添加到設計中。 第一個文本模塊是這個設計的關鍵。 通過將完全相同的背景圖像和 css 視差應用於文本模塊，我們可以通過動畫獲得完全獨特的效果。

繼續向第 1 列添加一個新的文本模塊。

然後更新文本模塊設置如下：

正文內容：

<p>Hi!<br>I'm Jane...</p>

<a href="#">about me</a>

然後為文本模塊提供您添加到行中的相同 css 視差背景圖像。

背景圖片：【上傳圖片】
使用視差效果：是
視差方法：CSS

文字字體：Fira Sans
文字字體粗細：輕
文字文字顏色：#ffffff
文字文字大小：70px
文本行高：1em

鏈接字體樣式：下劃線 (U)
鏈接文本顏色：#ffffff（默認），#881e67（懸停）
鏈接文字大小：30px
鏈接字母間距：2px

填充：頂部 20%，底部 20%，左側 10%，右側 10%

邊框寬度：20px
邊框顏色：#ffffff

然後將以下動畫添加到文本模塊：

動畫風格：幻燈片
動畫方向：右
動畫持續時間：1500ms
動畫強度：80%
動畫開始不透明度：20%

讓我們看看到目前為止的效果……

請注意動畫文本模塊的背景圖像如何停留在行背景的匹配位置上。 這是因為它們都使用 css 視差效果共享相同的背景圖像。

添加具有真實視差背景圖像的第二個文本模塊

此時，我們已準備好添加下一個文本模塊。 下一個將使用真正的視差效果具有不同的背景圖像。 我們也會給它一些動畫。

向第 2 列添加一個新的文本模塊。

然後用“我的博客”一詞更新正文內容。

然後用真視差法添加背景圖像。

背景圖片：【上傳圖片】
使用視差效果：是
視差法：真視差

文字字體：Fira Mono
文字字體樣式：TT
文本 文本對齊：居中
文字文字顏色：#ffffff
文字字母間距：10px
寬度：320px
最大寬度：320px
模塊對齊：居中

邊距：（桌面）：-5vw 頂部，4vw 底部
保證金（平板和手機）：3vw top
填充：頂部 70 像素，底部 70 像素

邊框寬度：20px
邊框顏色：#ffffff

動畫風格：幻燈片
動畫方向：下
動畫延遲：200ms

使用新的視差背景圖像創建第三個文本模塊

要創建第三個文本模塊，請複制您剛剛在第 2 列中創建的文本模塊。

然後我們將保持背景圖像不變，但我們將使用 CSS 視差方法更新視差效果。

寬度：240px
最大寬度：240px
模塊對齊方式：左
邊距：0px 底部
填充：頂部 170 像素，底部 170 像素，左側 95 像素，右側 95 像素

自定義寬度和左右填充用於創建垂直文本顯示，與較長的模塊設計相得益彰。

然後將動畫方向更新為向上而不是向下。

動畫方向：UP

最後結果

現在讓我們看看最終的結果。

第 2 部分：創建動畫和視差設計（版本 2）

下一個設計將通過在模塊的初始動畫之後加載行的視差背景圖像來添加獨特的動畫。 為此，我們需要為將移動到內容後面的 CSS 視差背景圖像嚴格使用單獨的行。 由於我們最初將顯示我們的部分背景，我們可以在行動畫之前為我們的內容添加自定義背景顏色。

這是如何做到的。

首先，部署線框視圖模式。 然後復制包含文本模塊的行。 現在您將有兩個相同的行。 接下來，刪除頂行內的文本模塊。 我們真正想做的就是在我們的頂排設計上搶先一步。

接下來，更新頂行的設置，如下所示：

高度：900px（桌面），2000px（平板和手機）
填充：0px 頂部，0px 底部

動畫風格：幻燈片
動畫方向：右
動畫持續時間：1250ms
動畫延遲：1800ms

我們給行設置了高度，因為默認情況下空行不會有任何高度。 所以你需要確保行的高度足以用內容覆蓋你的第二行的內容。 我們還為該行設置了一個延遲動畫，以便在文本模塊出現後它會滑到內容後面。

重疊兩行

現在我們要做的就是使用負邊距將底行向上移動，以便它與我們的背景動畫重疊頂行。

打開底行的設置並按如下方式更新邊距：

邊距：-900px 頂部（桌面），-2000px（平板電腦和手機）

然後使用該行的 css 視差方法取出背景圖像，因為我們將使用頂行背景圖像。

這是到目前為止的設計。 請注意第一行中的延遲背景動畫以及第 1 列中文本模塊的視差背景如何與其完美匹配。

添加部分背景顏色

要在行動畫之前為文本模塊提供初始背景顏色，您可以為該部分提供背景顏色。

打開部分設置並添加以下內容：

背景漸變左顏色：rgba(136,30,103,0.61)
背景漸變右側顏色：#881e67
漸變類型：徑向

最後結果

現在讓我們看看最終的結果。

可選的混合模式和動畫組合

您還可以通過向第二行添加混合模式並添加與模塊動畫協同工作的縮放動畫來獲得更多創意。

混合模式：亮度
動畫風格：縮放

這是最終結果。

這是它在移動設備上的外觀。

最後的想法

我希望您在我們探索了一些結合動畫和視差圖像的獨特方法的過程中學到了一些東西。 結果絕對是獨一無二的，我相信您可以輕鬆調整此設置以構建無數其他組合，這些組合將在您的下一個項目中看起來令人驚嘆。

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

乾杯!