如何将网格交错动画添加到 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 布局包！