如何为 Divi 中的任何元素添加悬停倾斜效果

在您的网页设计中添加悬停倾斜效果是为您的 Divi 网站带来活力的有趣且引人入胜的方式之一。 通常这种类型的设计需要插件或更高级的代码（如本教程中所示）。 但是，使用 Tilt.js（jQuery 的轻量级悬停倾斜效果），这个过程要容易得多。 使用 Tilt.js，您可以在几分钟内轻松地将悬停倾斜效果应用于任何内容。

在本教程中，我们将向您展示如何为 Divi 中的任何元素添加悬停倾斜效果。 结合使用tilt.js jQuery 片段和Divi 构建器，我们将向您展示如何向图像、一列模块、一行等添加令人印象深刻的悬停倾斜效果。 我们甚至还会向您展示如何添加令人惊讶的 3D 视差效果。

让我们开始吧！

抢先看

有关本教程背后功能的实时演示，请查看此代码笔。

这是我们将在本教程中构建的设计的快速浏览。

免费下载布局

要亲身体验本教程中的设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

要将部分布局导入您的 Divi 库，请导航到 Divi 库。

单击导入按钮。

在可移植性弹出窗口中，选择导入选项卡并从您的计算机中选择下载文件。

然后点击导入按钮。

完成后，分区布局将在 Divi Builder 中可用。

让我们进入教程，好吗？

你需要什么开始

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

1. 如果您还没有安装并激活 Divi 主题。
2. 在WordPress中新建一个页面，在前端使用Divi Builder编辑页面（visual builder）。
3. 选择“从头开始构建”选项。

之后，您将有一个空白画布开始在 Divi 中进行设计。

使用 Tilt.js 的基础知识

Tilt.js 是一个轻量级的 jQuery 视差悬停倾斜效果。 只需几行 jQuery，您就可以为页面上的任何元素添加悬停倾斜效果。 它带有多达 10 个选项（请参阅文档），可以轻松添加这些选项以控制倾斜效果设计和功能，包括比例和漂亮的眩光效果。

在最基本的层面上，一旦你访问了tilt.js 库，你就可以向你想要在悬停时倾斜的元素添加一个 CSS 类，然后使用一个简单的 jQuery 代码段在具有相同类的 jQuery 对象上应用倾斜函数.

例如，假设您将自定义 CSS 类添加到名为“et-js-tilt”的图像模块。

之后您需要做的就是添加以下 jQuery 代码片段，为图像添加悬停倾斜效果。

$(".et-js-tilt").tilt();

然后您可以为倾斜效果设置其他选项。 例如，您可以使用以下代码段添加缩放和眩光效果。

$(".et-js-tilt").tilt({
  glare: true,
  maxGlare: 0.7,
  scale: 1.1
});

结果会是这样……

对于更高级的效果，您可以将 transform:translateZ() 添加到任何子元素以获得 3D 视差效果。 稍后再谈。

现在我们对如何使用tilt.js有了一个基本的了解，接下来我们来探索一下如何在Divi中使用它。

如何为 Divi 中的任何元素添加悬停倾斜效果

向 Divi 模块添加倾斜悬停效果

向默认的常规部分添加一个三列行。

添加图像模块

在第一列中，添加一个图像模块。

注意：您可以使用任何您想要的模块。 它不必是图像模块。

上传您选择的图像。 我正在使用 Homemade Cookies Layout Pack 中的一个。

添加图像模块类

在高级选项卡下，添加以下 CSS 类：

• CSS 类：et-js-tilt

这个类稍后将用作我们倾斜函数的选择器。

复制和粘贴图像模块

接下来，复制图像模块并将其粘贴到其余两列中的每一列中。

如果您愿意，可以用新的图像替换重复的图像。 只要确保每个图像模块都有 CSS 类“et-js-tilt”。

添加tilt.js JQuery

为了添加倾斜我们的图像所需的tilt.js 库和代码片段，我们将使用一个代码模块。

首先，在现有行下添加一个新的单列行。

然后将代码模块添加到新行。

接下来，我们需要通过添加脚本访问tilt.js库从它们的CDN（https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery进口tilt.js。最小.js）。 将以下脚本粘贴到代码框中。

在脚本标签中使用以下 src 来导入库：

src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js"

它应该是这样的：

在添加将使用它的代码之前导入tilt.js 很重要。 所以，在指向tilt.js 的脚本之后，添加必要的脚本标签来包装我们需要添加的JQuery。 然后将以下 JQuery 粘贴到脚本标记之间。

jQuery(document).ready(function ($) {
  if ($(window).width() > 980) {

    $(".et-js-tilt").tilt({
      glare: true,
      maxGlare: 0.7,
      scale: 1.1,
      perspective: 300,
    });

  }
});

请注意， tilt()函数位于if语句中，当浏览器宽度大于 980px 时，该语句将执行。 这将确保效果只发生在桌面上。

这是结果。

向行添加倾斜悬停效果

就像我们之前提到的，您可以将这种悬停倾斜效果添加到 Divi 中的任何元素。 这包括一整行。 此外，您可以向行添加倾斜效果，同时保持行内每个模块的倾斜效果。

这是如何做到的。

复制行并向行添加唯一的 CSS 类

复制现有的图像行，然后打开复制行的设置。 在高级选项卡下，为该行指定一个唯一的 CSS 类，如下所示：

• CSS 类：et-row-js-tilt

添加jQuery

然后在之前的倾斜函数下添加以下 jQuery 以将单独的倾斜函数应用于行。

    $(".et-row-js-tilt").tilt({
      scale: 1,
      perspective: 1200,
    });

请注意，对于这种倾斜效果，我们将比例调回 1 并增加透视值，使倾斜更加微妙。

这是结果。

请注意该行如何具有在悬停在该行上时激活的倾斜功能，并且每个图像模块也具有我们之前添加的相同倾斜效果。 这是您可以应用嵌套倾斜效果实例的方法。

向具有多个 Divi 模块的列添加倾斜悬停效果

在某些情况下，为一列模块添加倾斜效果会很有帮助。 这将允许您使用 Divi 在一个列中设计多个模块，然后将所有这些元素作为一个单元倾斜。 为了向您举例说明如何做到这一点，我们将向带有图像模块、文本模块和按钮模块的列添加倾斜悬停效果。

添加新行

首先，在前一行图像下创建一个新的六分之一二分之一六分之一列的行。

添加图像模块

在第 2 列（中间列）内，添加一个新的图像模块。

将图像上传到模块并将图像对齐设置为居中。

添加文本模块

在图像模块下，添加具有以下 H2 标题的文本模块：

<h2>Local Organic</h2>

然后更新标题2样式如下：

• 标题 2 字体：Berkshire Swash
• 标题 2 文本对齐：居中
• 标题 2 文本颜色：#000000
• 标题 2 文字大小：60 像素（桌面）、32 像素（平板电脑）、20 像素（手机）
• 标题 2 行高：1.2em

添加按钮模块

在文本模块下，添加一个按钮模块。

将按钮文本更新为“关于我们”并更新设计设置如下：

• 按钮对齐：居中
• 按钮文字大小：18px
• 按钮文字颜色：#fff
• 按钮背景颜色：#000
• 按钮边框宽度：0px
• 按钮边框半径：100px
• 按钮字体：流沙
• 按钮字体粗细：粗体
• 填充：顶部 16 像素，底部 16 像素，左侧 30 像素，右侧 30 像素
• 盒子阴影：见截图

列设置

三个模块完成后，打开这些模块的父列（第 2 列）的设置并更新以下内容：

• 背景颜色：#f5cee6

• 填充：50px（顶部和底部），20px（左右）

将 CSS 类添加到列

在高级选项卡下，添加以下 CSS 类：

• CSS 类：et-column-js-tilt

添加 jQuery 以对列应用倾斜效果

为了给列添加倾斜效果，我们可以添加另一个针对列 CSS 类的类似 jQuery 片段。 将以下代码段粘贴到针对该行的上一个代码段下方。

    $(".et-column-js-tilt").tilt({
      scale: 1.1,
      perspective: 1000,
    });

这是最终结果。

为内部元素添加 3D 视差效果

对于更高级的悬停倾斜效果，我们可以为柱子的内部模块添加 3D 视差效果。 使用透视和transform:translateZ()的组合，当悬停倾斜效果处于活动状态时，我们可以让列中的每个模块在 3d 空间中弹出。

这是如何做到的。

复制上一行

首先，复制前一行，将倾斜效果添加到中间列。

添加唯一列类

然后使用唯一的 CSS 类更新中间列（第 2 列），如下所示：

• CSS 类：et-column-js-tilt-3d

自定义 CSS

为确保内部模块保留 3d 效果，请将以下自定义 CSS 添加到列的主要元素：

transform-style: preserve-3d;

添加 jQuery 和 CSS

然后在之前针对列的倾斜函数片段下添加更多 jQuery 片段，如下所示：

    const columnTilt3d = $(".et-column-js-tilt-3d").tilt({
      scale: 1.1,
      perspective: 1000,
    });
    columnTilt3d.on("tilt.mouseEnter", function (e) {
      $(e.target).addClass("tilt-active");
    });
    columnTilt3d.on("tilt.mouseLeave", function (e) {
      $(e.target).removeClass("tilt-active");
    });

这个 jQuery 向列添加了另一个基本的倾斜函数，就像前面的例子一样。 但是，只要倾斜效果处于活动状态，代码也会将新类（“倾斜活动”）切换到列。 当鼠标悬停在列上时，我们可以使用这个新类将transform: translateZ()值应用于每个模块。 这将创建弹出的 3d 视差效果。

为此，请将以下自定义 CSS 添加到代码框/内容的顶部，确保将 CSS 包装在必要的样式标签中。

  .et-column-js-tilt-3d.tilt-active .et_pb_image {
    transform: translateZ(100px);
  }
  .et-column-js-tilt-3d.tilt-active .et_pb_text {
    transform: translateZ(40px);
  }
  .et-column-js-tilt-3d.tilt-active .et_pb_button {
    transform: translateZ(50px);
  }

现在看看最终的结果。 注意三个模块在倾斜效果期间旋转时如何在 3d 空间中弹出。

最终结果

这是我们示例的最终结果的另一种看法。

最后的想法

Tilt.js 提供的悬停倾斜效果真的很有趣。 尽管我在本教程中使用了一些基本示例，但您可以轻松地将这些悬停倾斜效果应用到我们的任何预制布局或您自己的网站上。 享受！

我期待在评论中收到您的来信。

干杯!