如何將 Ken Burns 懸停效果添加到 Divi 中的圖像、模塊和行

肯伯恩斯效應已經存在一段時間了。 這種效果因美國紀錄片導演肯·伯恩斯 (Ken Burns) 而聞名，因為他結合使用了平移和縮放技術，使他的電影中的圖像栩栩如生。 在網頁設計中，Ken Burns Effect 已被證明是一種流行的設計技術，可以將背景圖像帶入生活。

Ken Burns 效果還可以用作圖像的懸停效果。 你肯定見過這個用法。 為了使圖像栩栩如生，網頁設計師為圖像添加了懸停效果，使它們能夠縮放、移動和旋轉。

隨著向 Divi Builder 發布 Transform 效果，將 kenburns 懸停效果帶入您的圖像從未如此簡單。 這些變換選項允許您隨意縮放（縮放）、移動（或平移）和旋轉圖像。 由於您可以將這些轉換應用於圖像的懸停狀態，設計的可能性幾乎是無窮無盡的。

在本教程中，我將向您展示使用 Divi Builder 為圖像和行創建完全獨特的 ken Burns 懸停效果是多麼容易。

讓我們開始吧。

搶先看

這是 ken Burns 懸停效果的先睹為快，可以使用 Divi 的變換選項輕鬆實現。

基本概念解釋

創建 Ken Burns 懸停效果的基本概念涉及使用 Divi 的新變換選項在懸停在圖像上時縮放、定位和旋轉圖像。 您可以按一定百分比增加縮放變換屬性，以使圖像在懸停時變大。 您可以使用 translate 變換屬性沿 x 和 y 軸移動圖像。 您可以通過設置特定的度數值（在本例中為 x 軸旋轉的度數值），使用旋轉變換屬性來旋轉圖像。 最後，您可以控製過渡持續時間（速度）和速度曲線來控制 ken Burns 懸停效果的流動速度。 三個變換屬性和過渡屬性協同工作以創建 kenburns 懸停效果，使您的照片栩栩如生。

您可以使用 Divi 提供的內置設置輕鬆微調變換屬性和過渡屬性。 但是，使此效果起作用的關鍵是需要將一行簡單的 css (overflow:hidden) 應用於包含圖像的列。 由於您要縮放、移動和旋轉圖像，您希望圖像的溢出隱藏在包含它的列之外。

一旦你有了基本的想法和功能，使用 Divi 的轉換選項將圖像精確定位到你想要的位置是多麼容易。

免費下載 Ken Burns 懸停效果示例

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

下載 zip 文件後，解壓縮文件夾。 接下來，使用 Divi Builder Portability 功能導入 .json 佈局。 或者您可以簡單地使用 Divi 的拖放功能將文件拖入 Divi Builder。 就是這樣！

下載文件

免費下載

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

下載

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

新頁面入門

您需要做的第一件事是創建一個新頁面。 然後給你一個頁面標題並在前端部署Divi Builder。 然後選擇“從頭開始構建”選項。

將 Ken Burns 效果添加到一列行中的圖像

對於第一個基本示例，我將向您展示如何將 kenburns 懸停效果添加到單列行中的單個圖像。 我將使用縮放、平移和旋轉變換選項來實現這種效果。

首先，創建一個具有一列行的新部分。 然後將圖像模塊添加到該行。

隱藏列溢出

在我們開始更新圖像設置之前，打開行設置並單擊高級選項卡。 然後將以下自定義 CSS 添加到 Column Main 元素：

overflow: hidden;

每當圖像在懸停時縮放到更大尺寸時，這將防止圖像延伸（或溢出）超出列容器。 如果不添加此項，圖像將脫離容器並隱藏頁面的其他元素。 從技術上講，您可以將此 css 添加到行主元素而不是列，但您還需要擺脫任何自定義行填充。

保存行設置。

添加您的圖片

現在我們可以將圖像添加到圖像模塊中。 打開圖像模塊設置並添加圖像。

確保圖像比列大得多。 當您在懸停時將圖像縮放到更大尺寸時，這對於防止圖像看起來模糊很重要。 如果您使用一列行的默認設置，則該列的最大寬度將為 1080 像素。 所以，我使用的圖像寬度約為 1500 像素，高度約為 900 像素。

重要提示：根據經驗，圖像越大，在不降低圖像質量的情況下縮放、移動和旋轉圖像所需的空間就越大。

添加變換懸停效果

現在我們已經有了我們的圖像，是時候使用這些變換選項來創建 Ken Burns 懸停效果了。 跳到設計選項卡切換打開變換選項。 激活懸停效果並選擇懸停選項卡。 現在任何變換效果自定義將僅適用於圖像模塊的懸停狀態。 然後在 Transform Scale 選項卡下，更新以下內容：

變換縮放 x 軸（懸停）：136%
變換縮放 y 軸（懸停）：136%

然後單擊 Transform Translate 選項卡並更新以下內容：

Transform Translate x 軸（懸停）：3%
變換平移 y 軸（懸停）：9%

這會將圖像向左移動 3%，向下移動 9%。 對於這個特定的圖像，我想要放大並將這對夫婦帶到列視口中心的效果。

默認情況下，翻譯長度值將以像素（而不是百分比）為單位。 您可以使用像素來移動圖像，但我發現使用百分比會使定位更具響應性。

接下來單擊變換旋轉選項卡並更新以下內容：

變換 旋轉 x 軸（懸停）：6deg

更新過渡選項

最後，我們需要更新過渡持續時間（完成變換懸停效果需要多長時間）和速度曲線（允許過渡在其持續時間內改變速度的計時函數）。 對於此示例，我希望在懸停時獲得更戲劇性（和經典）Ken Burns 效果的過渡需要更長的時間。 為此，請轉到高級選項卡並更新過渡選項，如下所示：

轉換持續時間：2000 毫秒（或 2 秒）
過渡速度曲線：線性（這確保過渡速度在持續時間內不會改變）

最後結果

現在讓我們看看最終的結果。 不要被下面 gif 的斷斷續續誤導。 在實時站點上過渡非常順利。

將 Ken Burns 懸停效果添加到三列行中的多個圖像

如果您想將 ken Burns 懸停效果添加到多列中的圖像，則應用相同的過程。 您需要做的主要事情是確保將“overflow:hidden” css 片段添加到包含您的圖像的每一列中。

使用上面的示例，將行的列結構更改為三列佈局。

接下來，使用將隱藏每列溢出的自定義 CSS 片段更新行設置。

第 1 列主要元素 CSS：

overflow:hidden;

第 2 列主要元素 CSS：

overflow:hidden;

第 3 列主要元素 CSS：

overflow:hidden;

接下來複製圖像模塊並將其粘貼到第 2 列和第 3 列中。

就是這樣。 這是最終結果。

由於此設計更典型的畫廊網格佈局，您可能希望稍微加快過渡持續時間以銳化懸停動畫。 您可以使用 Divi 的多選功能輕鬆完成此操作。 按住 ctrl 或 cmd 並選擇所有圖像模塊。 然後單擊其中一張圖像上的設置齒輪圖標以打開“元素設置”模式。

現在，您在元素設置中所做的任何更新都將一次應用於所有圖像。 更新元素設置中的過渡選項，如下所示：

轉換持續時間：500ms

這是有效的新過渡持續時間。

將 Ken Burns 懸停效果添加到具有背景圖像的任何模塊

Ken Burns 懸停效果也可用於圖像模塊以外的模塊。 如果您想將文本或圖標與模塊的背景圖像一起轉換，這很有效。

以下是將 Ken Burns 效果添加到文本模塊的方法。

首先創建一個具有一列行的新常規部分。 然後向該行添加一個文本模塊。

使用以下內容更新文本模塊：

<h1>We're Engaged!</h1>

然後向模塊添加背景圖像。 請記住添加足夠大的圖像，以便在懸停時為縮放和移動圖像留出空間。

然後更新標題設計選項如下：

標題字體：Prata
標題文字大小：6vw
自定義填充：頂部 10vw，底部 10vw，左側 3vw

轉換持續時間：5000ms

現在將以下轉換設置添加到文本模塊。

變換縮放 x 軸（懸停）：118%
變換縮放 y 軸（懸停）：118%

變換平移 x 軸（懸停）：6%
變換平移 y 軸（懸停）：6%

現在，使用列的以下自定義 CSS 更新行設置。

列主要元素 CSS：

overflow:hidden;

現在看看結果。

注意文本和背景圖像在懸停時如何一起變換。

將 Ken Burns 懸停效果與附加懸停效果相結合

您還可以將應用於模塊的 Ken Burns 懸停效果與附加效果相結合，以獲得更多創意。

將 Ken Burns 懸停效果與濾鏡效果相結合

如果您忘記了它們，濾鏡效果是為您的模塊添加創意樣式的好方法，尤其是在懸停時。 您可以將這些濾鏡效果與變換效果結合起來，實現一些非常獨特的懸停過渡。

為了向您展示，讓我們使用上面將 ken 燃燒效果添加到文本模塊的示例。 由於文本模塊已經有了變換懸停效果，讓我們添加一個額外的濾鏡效果來將圖像從黑白變為彩色。

打開文本模塊設置並更新以下過濾器選項：

飽和度（默認）：0%
飽和度（懸停）：100%

默認情況下，此轉換會將文本模塊設置為 0% 飽和度，這將去除顏色，使其變為黑白。 在懸停時設置回 100% 將添加圖像的原始顏色。

這是過濾效果與 ken Burns 懸停效果相結合的最終效果。

將 Ken Burns 懸停效果與行變換效果相結合

在本示例中，我將向您展示如何將 ken burns 懸停效果與添加到行中的附加變換效果相結合。 這個想法是使用變換效果在默認狀態下縮放和旋轉行，然後在懸停時恢復原始設計。

注意：此技術實際上僅適用於具有單個模塊的單列行。 這是因為訪問者需要同時將鼠標懸停在模塊和行上。 因此模塊需要佔據行的整個高度和寬度。 額外的模塊或間距會打破懸停狀態並導致問題。

為此，我們將繼續使用我們當前的文本模塊設計，該設計已經將 kenburns 懸停效果與附加過濾效果相結合。 所以這實際上是一個三重懸停效果！

打開包含文本模塊的行的設置。 然後更新以下內容：

自定義填充：頂部 0px，底部 0px，左側 0px，右側 0px

這是為了確保文本模塊和行之間沒有額外的間距。

接下來，我們將向該行添加一個框陰影，如下所示：

盒子陰影：見截圖
框陰影模糊強度：36px
陰影顏色：rgba(0,0,0,0.17)

現在添加以下變換效果：

變換縮放 x 軸（默認）：70%
變換縮放 x 軸（懸停）：100%
變換比例 y 軸（默認）：70%
變換縮放 y 軸（懸停）：100%

變換 旋轉 y 軸（默認）：19deg
變換旋轉 y 軸（懸停）：0deg
變換 旋轉 z 軸（默認）：23deg
變換旋轉 z 軸（懸停）：0deg

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

將 Ken Burns 懸停效果添加到整行內容

萬一您想知道，Ken Burns 懸停效果也可用於在懸停時使整行內容栩栩如生。 這對於包含大量內容的行來說不是很實用，因為它會使訪問者感到困惑或分心。 但是對於像標題這樣的東西，這可能是一種有用的設計技術。 訣竅是將自定義 CSS 片段“overflow:hidden”添加到該部分。 然後您可以將變換效果添加到行中。

最後的想法

儘管 Ken Burns Effect 已經存在一段時間了，您可能仍然會發現它對於在 Divi 中為您的圖像和模塊創建一些非常獨特的懸停效果很有用。 訣竅是知道如何使用令人驚訝的直觀的 Divi 變換選項。 本教程中給出的這些示例旨在介紹這個概念，並希望為您自己的使用提供一些啟發。 當您考慮將變換選項與 Divi 中可用的所有其他樣式選項結合使用的所有方式時，就會出現大量想法。

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

乾杯!