如何在 Divi 中使用拆分文本快門動畫設計創建圖像疊加

已發表: 2021-03-05

在您的網站上顯示圖像時，圖像疊加仍然是一種流行的設計資產。它們不僅提供了一種展示圖像的創造性方式，而且還可以使查看圖像對訪問者更加有趣和有吸引力，尤其是當您在懸停或單擊圖像時添加自定義動畫時。

在本教程中，我們將向您展示如何在 Divi 中使用拆分文本快門動畫創建圖像疊加。首先，我們將向您展示如何使用拆分文本百葉窗構建自定義圖像覆蓋。然後我們將向您展示如何使用 Divi 的內置變換選項來創建三個完全獨特的圖像疊加快門動畫設計。我們甚至會向您展示更多示例設計，讓這些創意源源不斷。

讓我們開始吧！

搶先看

以下是本教程中圖像疊加設計的快速瀏覽。

這是一個代碼筆，它演示了本教程中使用的相同設計。

免費下載佈局

具有拆分文本快門動畫和混合模式的圖像疊加

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

下載文件

免費下載

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

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

要將部分佈局導入您的 Divi 庫，請導航到 Divi 庫。

單擊導入按鈕。

在可移植性彈出窗口中，選擇導入選項卡並從您的計算機中選擇下載文件。

然後點擊導入按鈕。

分區通知框

完成後，分區佈局將在 Divi Builder 中可用。

讓我們進入教程，好嗎？

你需要什麼開始

擴展角標籤

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

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

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

第 1 部分：使用拆分文本快門構建圖像疊加

對於本教程的第一部分，我們將使用拆分文本百葉窗構建圖像疊加的初始設置。完成此操作後，我們可以稍後為百葉窗添加動畫。

行

首先，向常規部分添加一個兩列的行。

具有拆分文本快門動畫和混合模式的圖像疊加

之前，添加模塊，打開行設置並更新裝訂線寬度：

天溝寬度：2

具有拆分文本快門動畫和混合模式的圖像疊加

更新列

該列將是包含我們的圖像和快門覆蓋元素的主要容器。它也將是在懸停時啟動快門動畫的主要目標。換句話說，當光標在列內移動時，子元素（百葉窗）的動畫將打開，當光標移動到列外時，動畫將關閉。

要將我們的列指定為“快門列”並在稍後“懸停”時為其設置動畫，請將以下 CSS 類添加到列中：

CSS 類：快門列懸停

然後將溢出更新為隱藏，以便在動畫期間一旦超出列容器，我們就不會看到轉換後的元素。

水平溢出：隱藏
垂直溢出：隱藏

具有拆分文本快門動畫和混合模式的圖像疊加

添加主圖像

在第 1 列中，添加一個圖像模塊。這將作為我們將坐在快門覆蓋後面的主要圖像。

具有拆分文本快門動畫和混合模式的圖像疊加

將圖像上傳到圖像模塊。

具有拆分文本快門動畫和混合模式的圖像疊加

然後將圖像的對齊方式設置為居中。

具有拆分文本快門動畫和混合模式的圖像疊加

使用拆分文本創建頂部快門

現在我們的圖像已經就位，我們將使用文本模塊添加頂部快門。在圖像下添加一個新的文本模塊。

具有拆分文本快門動畫和混合模式的圖像疊加

通過將文本“divi”添加到正文區域來更新文本模塊內容。

具有拆分文本快門動畫和混合模式的圖像疊加

在設計選項卡下，更新文本樣式如下：

文字字體： Poppins
文字字體粗細：重
文字字體樣式：TT
文字文字顏色：#ffffff
文字文字大小：200px（桌面），30vw（平板電腦和手機）
文本字母間距：-0.03em
文本行高：0em
文本對齊：居中

具有拆分文本快門動畫和混合模式的圖像疊加

接下來，更新大小和間距選項：

寬度：100%
高度：50%
邊距：0px 底部

具有拆分文本快門動畫和混合模式的圖像疊加

在高級選項卡下，更新以下內容：

CSS 類：頂部快門

稍後我們將使用 CSS 類通過我們的代碼打開和關閉變換動畫。

然後將此自定義 CSS 添加到主元素：

display:flex;
align-items:flex-end;
justify-content:center;

此代碼使用 flex 來確保文本在模塊底部垂直對齊。由於文本的行高為 0，文本將顯示為僅顯示上半部分的拆分。

具有拆分文本快門動畫和混合模式的圖像疊加

為了定位我們的頂部快門，我們需要先隱藏文本的溢出，然後給它一個絕對位置，如下所示：

水平溢出：隱藏
垂直溢出：隱藏
位置：絕對

這會將快門移動到圖像的上半部分。

具有拆分文本快門動畫和混合模式的圖像疊加

使用匹配的拆分文本創建底部快門

現在我們已經完成了頂部百葉窗，我們可以通過複製頂部百葉窗文本模塊來快速啟動底部百葉窗的創建。

具有拆分文本快門動畫和混合模式的圖像疊加

然後打開復製文本模塊並更新以下內容：

CSS 類：頂部快門

通過將 align-items 屬性的“flex-end”替換為“flex-start”來更新主元素 CSS。這是最終的 CSS：

display:flex;
align-items:flex-start;
justify-content:center;

使用“flex-start”，文本在模塊頂部垂直對齊。由於文本的行高為 0，文本將顯示為僅顯示下半部分的拆分。

然後使用垂直偏移更新絕對位置，如下所示：

垂直偏移：50%

這使快門文本模塊位於圖像的下半部分上方。

兩個百葉窗上的拆分文本現在應該完美匹配。

具有拆分文本快門動畫和混合模式的圖像疊加

此時，我們已成功為拆分文本快門圖像疊加創建了設置。這包括作為容器的快門列、主圖像、位於圖像上半部分的頂部快門和位於圖像下半部分的底部快門。

具有拆分文本快門動畫和混合模式的圖像疊加

在接下來的幾個示例中，我們將使用它作為一種入門模板，這些示例將包括使用變換屬性的快門效果動畫。

第 2 部分：代碼

要添加快門動畫的功能，我們需要使用 Code 模塊的一些 CSS 和 JS 片段。

向頁面添加新的代碼模塊。我們可以將它添加到我們用於初始疊加構建的第一個頂部部分的右列。

具有拆分文本快門動畫和混合模式的圖像疊加

CSS

將以下 CSS 粘貼到代碼框中，確保使用必要的樣式標籤對其進行包裝：

  /* transition duration of shutter animation */
  .top-shutter,
  .bottom-shutter {
    transition: transform 1s;
  }
  /* disables all transform options created in
  Divi Builder for both shutters */
  .divi-transform-none .top-shutter,
  .divi-transform-none .bottom-shutter {
    transform: none;
  }
  .on-click {
    cursor:pointer;
  }

這個 CSS 非常簡單。它所做的只是將transform: none應用於具有“divi-transform-none”類的列內的百葉窗。此類將使用 JS 打開和關閉以創建動畫。 transition:transform 1s只是將過渡（或動畫）的持續時間設置為持續 1 秒。

JS

在 CSS 之後，將以下 JQuery 添加到代碼框中，並確保使用必要的腳本標籤對其進行包裝：

(function ($) {
  $(document).ready(function () {
    /*
  Toggle shutter transform animation on hover.
  To work, Divi Column with shutters must include
  these CSS Classes: "shutter-column on-hover divi-transform-none".
  */
    $ShutterColumnToHover = $(".shutter-column.on-hover");

    $ShutterColumnToHover.hover(function () {
      $(this).toggleClass("divi-transform-none");
    });

    /*
  Toggle shutter transform animation on click.
  To work, Divi Column with shutters must include
  these CSS Classes: "shutter-column on-click divi-transform-none".
  */
    $ShutterColumnToClick = $(".shutter-column.on-click");

    $ShutterColumnToClick.on("click", function (e) {
      $(this).toggleClass("divi-transform-none");
      e.stopPropagation();
    });

    $(document).on("click", function (e) {
      if ($(e.target).is(".shutter-column.on-click") === false) {
        $ShutterColumnToClick.addClass("divi-transform-none");
      }
    });
  });
})(jQuery);

具有拆分文本快門動畫和混合模式的圖像疊加

代碼的第一部分添加了在列具有“shutter-column on-hover divi-transform-none”類時在懸停時切換快門變換動畫的功能。

    $ShutterColumnToHover = $(".shutter-column.on-hover");

    $ShutterColumnToHover.hover(function () {
      $(this).toggleClass("divi-transform-none");
    });

代碼的第二部分添加了在列具有“shutter-column on-click divi-transform-none”類時在單擊時切換快門變換動畫的功能。

    $ShutterColumnToClick = $(".shutter-column.on-click");

    $ShutterColumnToClick.on("click", function (e) {
      $(this).toggleClass("divi-transform-none");
      e.stopPropagation();
    });

    $(document).on("click", function (e) {
      if ($(e.target).is(".shutter-column.on-click") === false) {
        $ShutterColumnToClick.addClass("divi-transform-none");
      }
    });

第 3 部分：拆分文本快門動畫設計

設計#1

為了創建我們的第一個快門動畫設計，我們將通過複製第一部分來快速啟動設計過程。這將為我們提供一個新的部分，其中包含一個預先構建的圖像疊加層，並且已準備好拆分文本百葉窗。

具有拆分文本快門動畫和混合模式的圖像疊加

將變換屬性添加到頂部快門

通常，當您使用 CSS 為具有變換屬性的內容設置動畫時，該元素最初沒有變換樣式，然後每當用戶懸停或單擊該項目時都會應用變換樣式。在 Divi 中，我們將翻轉這個過程，首先使用 Divi Builder 將變換樣式添加到元素。這允許我們在可視化編輯設計時使用內置的轉換選項。然後，一旦我們完成所有變換設計元素的添加，我們就可以最初禁用它們（使用 CSS 類），然後在用戶與疊加層交互時將其打開和關閉。

要將變換設計添加到頂部百葉窗，請打開頂部百葉窗文本模塊設置並更新以下內容：