如何將網格交錯動畫添加到 Divi 中的圖像庫

已發表: 2021-06-11

Divi 的圖庫模塊仍然是一個方便且有用的工具，可以為您的網站創建令人驚嘆的圖庫。內置的設計設置可讓您獲得所有必需品和更多。但是，在本教程中，我們將通過獨特的驚人動畫效果將圖庫設計提升到一個新的水平。使用 Divi 的內置設計選項anime.js 的組合，這個驚人的動畫類似於一種漣漪效應，它以流暢的設計動畫一個接一個地展示畫廊中的每個圖像。這將非常適合那些希望為訪問者展示您的畫廊的獨特展示以及在瀏覽畫廊的每一頁時令人印象深刻的過渡的人。

讓我們開始吧！

搶先看

這是我們將在本教程中構建的設計的快速瀏覽。

這是一個演示相同概念的代碼筆。

免費下載佈局

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

下載文件

免費下載

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

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

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

單擊導入按鈕。

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

然後點擊導入按鈕。

分區通知框

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

讓我們進入教程，好嗎？

你需要什麼開始

擴展角標籤

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

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

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

如何將驚人的動畫添加到 Divi 圖像庫

第 1 部分：設計圖庫頁面佈局

這部分

首先，打開現有部分的設置並給它一個背景漸變，如下所示：

背景漸變左顏色：#d915b5
背景漸變右顏色：#000000
起始位置：50%
結束位置：25%

divi 驚人的動畫圖片庫

在設計選項卡下，更新填充：

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

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

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

divi 驚人的動畫圖片庫

頁面標題行

在該部分內，添加一列行。這將保留我們的頁面標題。

divi 驚人的動畫圖片庫

打開行設置並更新填充：

填充：頂部 15 像素，底部 15 像素

divi 驚人的動畫圖片庫

標題文本模塊

要創建頁面標題，請將文本模塊添加到行/列。

divi 驚人的動畫圖片庫

然後使用以下 H1 標題更新正文內容：

&lt;h1&gt;Gallery&lt;/h1&gt;

divi 驚人的動畫圖片庫

在文本設計設置下，更新以下內容：

標題字體： Poppins
標題文字對齊方式：居中
標題文字顏色：#ffffff
標題文字大小：100 像素（桌面）、80 像素（平板電腦）、60 像素（手機）

divi 驚人的動畫圖片庫

Gallery 模塊所在的行

在同一部分中，創建一個新的一列行來保存畫廊模塊。

divi 驚人的動畫圖片庫

打開行設置並給它一個黑色背景：

背景顏色：#000000

divi 驚人的動畫圖片庫

在設計設置下，更新以下內容：

使用自定義裝訂線寬度：是
天溝寬度：1
寬度：95%
最小高度：80vh
填充：0px 頂部，0px 底部
盒子陰影：見截圖
框陰影垂直位置：0px
框陰影水平位置：0px
框陰影傳播強度：70px
陰影顏色：#000000

divi 驚人的動畫圖片庫

第 2 部分：設計圖庫模塊

最後，我們準備添加和設計畫廊模塊。要創建圖庫，請向該行添加一個新的圖庫模塊。

divi 驚人的動畫圖片庫

圖片

在圖庫設置的內容選項卡下，添加要用於圖庫的圖像。在本例中，我們將添加 65 張圖像（或至少超過 25 張）。這將為我們提供大量畫廊項目來展示我們驚人的動畫效果和分頁。

將圖像上傳到圖庫後，請更新以下內容：

圖片數量：25
顯示標題和說明：否
顯示分頁：是

divi 驚人的動畫圖片庫

注意：將圖像計數設置為“25”定義了單擊分頁鏈接時每頁將顯示的圖像數量。我們將使用自定義代碼添加的驚人網格動畫基於每頁 5 行 5 張圖像（25 張圖像）的圖像庫。為獲得最佳效果，請確保您至少有 25 張圖像並且圖像計數設置為 25。

疊加和分頁設計

在設計選項卡下，更新覆蓋設計：

疊加圖標顏色：#ffffff
疊加背景顏色：rgba(217,21,181,0.55)
疊加圖標：加號圖標（見截圖）

divi 驚人的動畫圖片庫

分頁文本對齊：居中
分頁文字大小：2em
分頁行高：2em
填充：頂部 10 像素，底部 10 像素，左側 5 像素，右側 5 像素

divi 驚人的動畫圖片庫

高級造型

接下來，我們將向畫廊模塊添加一些高級樣式。這樣做的主要原因是控制不同設備上每行顯示的圖像數量。

首先，讓我們向 Gallery Item 添加一些 CSS，如下所示：

圖庫項目 CSS（桌面）

animation: fadeLeft 0s !important;
background: #000000;
padding: 10px;
width: 20% !important;
margin: 0 !important;
clear: none !important;

圖庫項目 CSS（平板電腦）

animation: fadeLeft 0s !important;
background: #000000;
padding: 5px;
width: 25% !important;
margin: 0 !important;
clear: none !important;

圖庫項目 CSS（電話）

animation: fadeLeft 0s !important;
background: #000000;
padding: 5px;
width: 50% !important;
margin: 0 !important;
clear: none !important

請注意，每個設備上每個圖庫項目的寬度都會發生變化。桌面上 20% 的寬度將創建每行 5 個圖像。平板電腦上 25% 的寬度將創建每行 4 個圖像。手機上 50% 的寬度將每行創建 2 個圖像。

接下來，取出分頁邊框，但將以下 CSS 添加到 Gallery Pagination 框中：

border-top: 0px !important;
padding-top: 20px;

最後，為活動分頁鏈接添加自定義顏色和字體粗細：

color: #d915b5 !important;
font-weight: bold;

divi 驚人的動畫圖片庫

在我們保存它之前，請確保將以下 CSS 類添加到 Gallery 模塊：

CSS 類：et-anime-gallery

divi 驚人的動畫圖片庫

第 3 部分：使用 JQuery 和 Anime.js 將驚人的動畫效果添加到圖庫

現在設計已經完成，我們有一個簡單而專業的圖片庫佈局。我們需要做的就是添加必要的代碼來創建圖片庫中的驚人動畫。

為此，請在畫廊模塊下添加一個代碼模塊。

divi 驚人的動畫圖片庫

CSS

在代碼內容框中，粘貼以下 CSS，確保將 CSS 包裹在必要的樣式標籤中：

/*hide prev and next pagination links*/  
.et-anime-gallery li.prev, .et-anime-gallery li.next {
  display:none !important;
  }

divi 驚人的動畫圖片庫

Anime.js 庫

在結束樣式標記下方，將以下 src 與腳本標記一起粘貼以調用anime.js 庫，以便我們可以將其用於其下方的 JavaScript/Jquery。

src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"

腳本應該是這樣的……

divi 驚人的動畫圖片庫

JQuery

在調用anime.js 庫的腳本下，粘貼以下JQuery 並使用必要的腳本標籤將其包裝起來。

jQuery(function ($) {
  $(document).ready(function () {
    
    var fromCenter = "center";
    var animeTargetItem = ".et-anime-gallery .et_pb_gallery_item";
    var animeTargetImage = ".et-anime-gallery .et_pb_gallery_image";
    var $paginationLink = $(".et-anime-gallery .et_pb_gallery_pagination li a");
    
		//animate gallery on page load
    animateGalleryFunction(animeTargetItem, animeTargetImage, fromCenter);

    //animate gallery when clicking pagination number link
    $($paginationLink).click(function (e) {
      var pageNum = $(e.target).attr("data-page");
      var fromNum = pageNum*25-25; //replace 25 with image count for gallery module
      animateGalleryFunction(animeTargetItem, animeTargetImage, fromNum);
    });

    function animateGalleryFunction(targetItem, targetImage, stagFrom) {
      //animate gallery image
      anime({
        targets: targetImage,
        opacity: [0, 1],
        rotateX: [0, 360],
        scale: [0.5, 1],
        direction: "normal",
        easing: "easeInOutSine",
        duration: 600,
        delay: anime.stagger(
          200,
          { grid: [5, 5], from: stagFrom },
          { start: "100" }
        ),
      });
      //animate gallery item background
      anime({
        targets: targetItem,
        background: ["#000", "#d915b5", "#000"],
        direction: "normal",
        easing: "easeInOutSine",
        duration: 600,
        delay: anime.stagger(
          250,
          { grid: [5, 5], from: stagFrom },
          { start: "100" }
        ),
      });
    }
  });
});

divi 驚人的動畫圖片庫

最後結果

更新圖庫和代碼

每當您想要更改圖庫和動畫效果以適合您自己的網站時，請記住一些提示。首先，如果要將圖庫圖像計數更改為 25 以外的值，則需要更新代碼以反映該新值。例如，如果將其更改為 20，則還需要更改以下變量中的數字：

var fromNum = pageNum*25-25;

對此……

var fromNum = pageNum*20-20;

您可能還需要更新兩個動畫的延遲屬性的網格值。例如，如果桌面上每頁只有 20 個圖像，則只有 4 行 5。因此，您需要更改以下值：

grid: [5, 5]

對此……

grid: [4, 5]

此外，您可以根據需要更改動畫屬性值。例如，如果要更改圖庫項目背景動畫的顏色，則可以更新以下內容：

background: ["#000", "#d915b5", "#000"]

對此……

background: ["#000", "#ffffff", "#000"]

這將在動畫期間將粉紅色背景顏色更改為白色。

最後的想法

使用 Divi builder 完成所有設計後，將驚人的動畫添加到您的圖片庫可能是將設計提升到一個新水平的好方法。動畫的關鍵是利用anime.js 庫的強大功能來定位圖像和背景以執行多個動畫。隨意在他們的網站上了解更多關於使用 Anime.js 網格交錯的信息。隨意調整代碼的屬性和值，將您自己的耀斑添加到設計中。

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

乾杯!

如何將網格交錯動畫添加到 Divi 中的圖像庫

搶先看

免費下載佈局

免費下載

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

你需要什麼開始

如何將驚人的動畫添加到 Divi 圖像庫

第 1 部分：設計圖庫頁面佈局

這部分

頁面標題行

標題文本模塊

Gallery 模塊所在的行

第 2 部分：設計圖庫模塊

圖片

疊加和分頁設計

高級造型

第 3 部分：使用 JQuery 和 Anime.js 將驚人的動畫效果添加到圖庫

CSS

Anime.js 庫

JQuery

最後結果

更新圖庫和代碼

最後的想法

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