如何在懸停時使用動畫 Gif 切換背景圖像

在懸停時切換帶有動畫 GIF 的背景圖像是一種讓您的內容栩栩如生的好方法，同時還可以為產品或服務提供很酷的插圖。 例如，如果您要宣傳特定軟件產品的功能，動畫 GIF 可以幫助說明產品功能的各個方面（我們在 Elegant Themes 中為產品執行此操作）。 但是，您可能希望在懸停時顯示該功能的靜態屏幕截圖，而不是最初顯示該 GIF 動畫版本（或 GIF）。

在本教程中，我將向您展示如何創建一個在懸停時使用動畫 GIF 切換背景（靜止）圖像的簡介。 我們將首先介紹如何使用 Snagit（一種屏幕捕獲軟件）創建屏幕截圖和 GIF。 然後我們將討論如何將這些背景圖像實現為一個簡介，以便它們在懸停時切換。 使用 Divi 的背景懸停選項，圖像的實際切換非常容易。

這種設計將有助於保持設計靜態，然後在用戶與內容交互時吸引用戶。

讓我們開始吧。

搶先看

免費下載懸停佈局上的 GIF 背景

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

下載文件

免費下載

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

下載

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

要將佈局導入您的頁面，只需解壓縮 zip 文件並將 json 文件拖到一個新頁面中，並啟用 Divi Builder。

讓我們進入教程好嗎？

你需要什麼開始

訂閱我們的 YouTube 頻道

要開始，您將需要以下內容：

1. 已安裝並激活 Divi 主題
2. 屏幕捕獲軟件（或工具組合）可讓您截取屏幕截圖、錄製屏幕視頻和創建 GIF。 在本教程中，我將使用 Snagit，主要是因為它是我每天在博客文章和教程中使用的多合一解決方案。
3. 在前端從頭開始構建的新頁面（可視化構建器）

之後，您將有一個空白畫布開始在 Divi 中構建一些懸停選項卡。

第 1 部分：創建屏幕截圖和 GIF

對於此設計，我們希望創建一個屏幕截圖以顯示為模糊模塊的靜止背景圖像。 然後，我們想要創建一個 GIF（動畫圖像），通過簡短的說明產品的工作原理，使靜態背景圖像栩栩如生。 訣竅是創建看起來足夠相似的圖像和 GIFS，以便在懸停時切換一個圖像與另一個圖像時它們具有平滑的過渡。

創建兩個圖像後，我們可以使用靜止圖像作為初始背景圖像。 然後我們可以在將鼠標懸停在模糊模塊上時將背景圖像切換為 gif 圖像。

要創建屏幕截圖和 GIF，我將使用 Snagit。 雖然它不是免費軟件，但它確實易於使用，它允許您在一個地方創建屏幕截圖、錄製屏幕並將屏幕錄製隱藏到 GIF 中。

創建屏幕截圖靜止圖像

要創建屏幕截圖，請打開 Snagit 並打開捕獲框。 然後確保通過選擇屏幕區域來選擇捕獲圖像。 這將允許您拖動屏幕上的一個區域以作為圖像捕獲。 要初始化屏幕捕獲，請單擊捕獲按鈕。

然後單擊並拖動您希望捕獲為圖像的屏幕區域周圍的捕獲區域。

將圖像保存到您的計算機。 然後再次打開 Snagit Capture 框並通過選擇屏幕區域來選擇捕獲視頻。 要初始化屏幕捕獲，請單擊捕獲按鈕。

然後單擊並拖動屏幕區域周圍的捕獲區域，將其捕獲並記錄為視頻剪輯。 為了在靜止圖像和 gif 之間創建更無縫的過渡，您需要為視頻捕捉與圖像相同的區域（或盡可能接近）。

準備好後，單擊錄製按鈕並進行要錄製的演示。

完成後，單擊停止以停止錄製。 然後您可以在 Snagit 編輯器中編輯視頻剪輯。 完成編輯後，單擊視頻旁邊的 Gif 按鈕以從視頻中創建 Gif。

在 Create Gif 彈出窗口中，根據需要修改輸出設置。 確保啟用循環，以便您的 gif 將重複。 然後單擊創建按鈕。

創建 gif 後，將其保存到您的計算機。

現在，您已準備好將靜止圖像和 gif 圖像添加到 Divi 中的設計中。

第 2 部分：創建一個 Blurb，在懸停時使用動畫 Gif 圖像切換背景圖像

如果您還沒有這樣做，請創建一個新頁面並部署 Divi Builder 以在前端構建。 然後創建一個具有兩列行的新常規部分。

在第 1 列中，添加一個模糊模塊。

然後更新內容設置如下：

正文：“正文放在這裡”
使用圖標：是
圖標：雲（見截圖）

添加默認背景圖像

接下來，將默認背景圖像添加到簡介中，如下所示：

背景圖片：上傳您創建的背景圖片（靜態截圖）。
背景圖像大小：適合（這將確保整個圖像保持在視野中）
背景圖像位置：頂部中心（這將使圖像保持在模糊的頂部）

添加懸停背景 Gif 圖像

設置好初始背景圖像後，部署背景懸停選項並選擇懸停選項卡。 然後添加 Gif 圖像作為懸停狀態的新背景圖像。

設置 Blurb 模塊的樣式

通過更新以下設計設置繼續設置模糊模塊的樣式：

圖標顏色：#6bb962
圓圈圖標：是
圓圈顏色：#ffffff
文本對齊：居中
標題字體：Lora
標題文字大小：34px
填充：頂部 50%，底部 5%，左側 3%，右側 3%

這種設計的真正關鍵是填充。 為了將背景放置在模糊內容上方，您需要添加大約 50% 的頂部填充。 並且由於背景圖像大小設置為“適合”並且位置設置為“頂部中心”，因此它將很好地位於響應瀏覽器寬度的內容上方。

最後，在懸停時給模糊效果框陰影，如下所示：

盒子陰影：見截圖
框陰影垂直位置：0px
框陰影模糊強度：0px（默認），24px（懸停）

最後結果

這是最終結果。

這是平板電腦和手機上的設計。

這是帶有不同屏幕截圖和顏色的附加簡介的樣子。

最後的想法

如果您不熟悉在您的網站上使用 GIF，您絕對應該考慮使用它。 他們真的可以讓您的內容栩栩如生，並為您的訪問者提供非常有用的插圖。 而且，使用 Divi 的背景懸停選項，您可以輕鬆地在懸停時切換帶有 GIF 的靜止圖像。 該解決方案可以預先減少分散注意力的設計，在與您的內容交互時真正吸引用戶。 希望您發現它對您的下一個項目有用。

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

乾杯!