如何在 Divi 中將懸停效果與 CSS 視差背景相結合

在 Divi 中使用帶有背景圖像的 CSS 視差使我們能夠創建出奇獨特的懸停效果。 視差是我們可以為網站增添活力的眾多方式之一。 當將視差與 Divi 的大量懸停選項相結合時，我們將內容變得更加生動。

在本教程中，我們將向您展示如何在 Divi 中快速輕鬆地設計獨特的 CSS 視差背景懸停效果。 無需插件或自定義編碼！

讓我們開始吧。

搶先看

這是我們將在本教程中設計的 css 視差背景懸停效果的快速瀏覽。

免費下載佈局

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

下載文件

免費下載

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

下載

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

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

讓我們進入教程好嗎？

你需要什麼開始

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

1. 已安裝並激活 Divi 主題
2. 在前端從頭開始構建的新頁面（可視化構建器）
3. 用於模擬內容的圖像

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

第 1 部分：在 Divi 中創建突圍視差懸停效果

首先，創建一個具有一列行的常規部分。

在添加模塊之前，打開部分設置並使用 CSS 視差添加背景圖像。

確保圖像寬度至少為 1920 像素。 該設計適用於具有大量紋理的較暗背景圖像。 我正在使用 Divi Builder 提供的 Coffee Shop Layout Pack 中的一個。

然後向該部分添加一些填充，如下所示：

填充物：10vw 頂部，10vw 底部

添加模糊模塊

一旦部分背景和填充就位，向行添加一個模糊模塊。

然後用幾句話的正文更新簡介內容。 您可以在那裡保留默認標題。

然後單擊以使用圖標並為宣傳語選擇咖啡圖標。

內容準備好後，更新設計設置如下：

圖標顏色：#ffffff
圖標字體大小：50px
文本對齊：居中
標題字體：Oswald
標題字體樣式 TT
標題文字顏色：#ffffff
標題字母間距：2px
正文字體：Nunito
正文顏色：#ffffff
正文字母間距：1px
填充：頂部 30 像素，底部 30 像素，左側 30 像素，右側 30 像素

調整行寬

設計完簡介後，跳轉到行設置並調整最大寬度。

最大寬度：80%

列設置

對於本示例，我們將在列級別激活懸停效果。 這允許您使用多個模塊來構建內容，即使我們現在只使用一個模糊模塊。

為了使這種視差懸停效果起作用，我們需要將相同的背景圖像添加到我們在我們的部分中使用的列中。 我們還需要在列背景圖像上使用相同的 CSS 視差方法。

打開列設置並使用 CSS 視差添加相同的背景圖像。

您將看不到列背景圖像和部分背景圖像之間的任何區別，因為它們都使用 CSS 視差，這基本上將圖像固定在網頁上的完全相同的位置。 但是，一旦懸停效果就位，您就會看到差異。

繼續更新柱設計設置如下：

填充：4vw 頂部，4vw 底部
圓角：10px

然後為該列提供一個僅在懸停時顯示的框陰影，如下所示：

盒子陰影：見截圖
框陰影垂直位置：0px
框陰影模糊強度：36px
陰影顏色（默認）：rgba(0,0,0,0)
陰影顏色（懸停）：rgba(0,0,0,0.72)

現在讓我們轉到變換選項並在懸停時更新以下變換樣式：

變換比例（懸停）：105%

這將稍微放大列（及其內容）以創建稍微彈出背景圖像的效果。

變換平移 Y 軸（懸停）：-2.5%

這會在懸停時稍微向上移動列以創建輕微的不對稱位移。

變換原點：100% 50%（底部中心）

這從底部中心原點開始縮放效果，當與平移值結合時，類似於微妙的鉸鏈效果。

到目前為止，這是 css 視差懸停效果。

現在打開行設置並複制該列兩次以創建總共三列，每列都具有相同的模糊和懸停效果。

最後結果

這是最終的設計。 請注意在向下滾動頁面時默認情況下如何隱藏視差背景圖像。 然後當它們彈出時懸停在每一列上時它們就會出現。 在將鼠標懸停在列上向下滾動頁面時，您還可以看到視差仍然在列上起作用。 這是一種微妙但極其獨特的懸停效果。

為懸停效果添加旋轉

我們還可以為 css 視差懸停效果添加旋轉，這為設計增添了很好的觸感。 只需打開每個列設置並更新以下內容：

變換旋轉 Z 軸（懸停時）：5deg

如果你想混合，你可以給中間列一個-5度的旋轉。

這是最終結果。

這是相同的設計，背景圖像較淺，文字較深。

第 2 部分：在 Divi 中創建放大鏡視差懸停效果

複製第一個設計中的部分，然後打開部分設置並用新的背景圖像替換背景圖像。 我正在使用我們的 Video Game Layout Pack 中的一個，因為它確實突出了放大視差懸停效果。

更新行設置

我們將需要一些額外的空間用於此設計，因此打開行設置並更新以下內容：

天溝寬度：1
寬度：100%
最大寬度：98%

之後，跳轉到內容選項卡並刪除兩列，只剩下一列。

列設置

對於這個設計，我們需要在模塊級別而不是列級別應用懸停效果，因此我們需要重置列的默認樣式。 為此，請右鍵單擊列項目並選擇“重置項目樣式”。

更新模糊模塊

欄目設置恢復為默認樣式後，打開blurb模塊設置，添加與欄目相同的css視差背景圖片。

漿紗

為了創建一個圓形模塊，首先我們需要給它一個匹配的寬度和高度，如下所示：

寬度：300px
模塊對齊：居中
高度：300px

邊界

為了完成圓形效果，我們需要更新圓角並給它一個輕微的邊框。

圓角：50%
邊框寬度：1px
邊框顏色：rgba(255,255,255,0.12)

框陰影懸停效果

接下來，在懸停時給模糊效果一個框陰影，如下所示：

盒子陰影：見截圖
框陰影模糊強度：36px
陰影顏色（默認）：rgba(0,0,0,0)
陰影顏色（懸停）：rgba(0,0,0,0.7)

變換懸停效果

框陰影到位後，按如下方式更新變換選項：

變換原點（默認）：50% 0%（左中）

這將確保簡介在放置在三列行的最左側後不會延伸到頁面之外。

變換比例（懸停）：130%

這將放大模糊並真正放大視差背景圖像以獲得酷炫的懸停效果。

複製列

完成簡介後，我們可以復制該列以創建三列，每列都具有相同的簡介模塊。

打開行設置並將列複製兩次，總共三列。

更新變換原點

由於我們的簡介模塊都將變換原點設置為“左中心”，因此我們需要針對中心和右列中的簡介進行調整，以便它們從適當的位置進行縮放。

打開第 2 列中的模糊模塊設置並更新以下內容：

變換原點：50% 50%（中心居中）

然後打開第 3 列中的模糊模塊的設置並更新以下內容：

變換原點：50% 100%（中右）

最後結果

現在看看最終的結果。 請注意效果如何真正放大了模糊背後的 css 視差背景圖像。 當您將鼠標懸停在宣傳欄上向下滾動時，它看起來就像放大鏡的效果。

事實上，這太酷了，我們可能希望將其保留為默認樣式，而不僅僅是處於懸停狀態。

最後的想法

我希望這篇文章中的例子能讓你的創意源源不斷，這樣你就可以探索更酷的設計和懸停效果，以結合 css 視差。 設置過程非常簡單，但可能性似乎無窮無盡。

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

乾杯!