如何在 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 类），然后在用户与叠加层交互时将其打开和关闭。

要将变换设计添加到顶部百叶窗，请打开顶部百叶窗文本模块设置并更新以下内容：