WordPress divi主题

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

by | Apr 27, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

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

google广告开户

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

让我们开始吧!

抢先看

有关本教程背后功能的实时演示,请查看此 codepen。

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

免费下载布局

要掌握本教程中的设计,您首先需要使用下面的按钮下载它。 要访问下载,您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者,您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包! 如果您已经在列表中,只需在下面输入您的电子邮件地址,然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

要将部分布局导入 Divi 库,请导航到 Divi 库。

单击导入按钮。

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

然后单击导入按钮。

WordPress divi主题

迪维通知框

完成后,部分布局将在 Divi Builder 中可用。

让我们进入教程,好吗?

你需要什么开始

扩展角落标签

要开始,您需要执行以下操作:

  1. 如果您还没有,请安装并激活 Divi 主题。
  2. 在 WordPress 中创建一个新页面,并使用 Divi Builder 在前端(可视化构建器)编辑页面。
  3. 选择“从头开始构建”选项。

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

使用 Tilt.js 的基础知识

Tilt.js 是 jQuery 的轻量级视差悬停倾斜效果。 只需几行 jQuery,您就可以为页面上的任何元素添加悬停倾斜效果。 它带有多达 10 个选项(请参阅文档),可以轻松添加这些选项以控制倾斜效果设计和功能,包括 规模 和一个美丽的 强光 影响。

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

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

fiverr建站WordPress程序员

之后您需要做的就是添加以下 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 模块添加倾斜悬停效果

将三列行添加到默认常规部分。

在divi中添加悬停倾斜效果

添加图像模块

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

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

高质量外链购买

在divi中添加悬停倾斜效果

上传您选择的图像。 我正在使用自制饼干布局包中的一个。

在divi中添加悬停倾斜效果

添加图像模块类

在高级选项卡下,添加以下 CSS 类:

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

JasperAI 10000字免费额度试用

在divi中添加悬停倾斜效果

复制和粘贴图像模块

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

在divi中添加悬停倾斜效果

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

添加tilt.js JQuery

要添加倾斜图像所需的tilt.js 库和代码片段,我们将使用代码模块。

WordPress备份工具updrafplus

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

在divi中添加悬停倾斜效果

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

在divi中添加悬停倾斜效果

接下来,我们需要通过添加一个来访问tilt.js 库 脚本 从他们的 CDN (https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js) 导入tilt.js。 粘贴以下内容 脚本 在代码框中。

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

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

它应该如下所示:

在divi中添加悬停倾斜效果

在添加将使用它的代码之前导入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,
    });

  }
});

在divi中添加悬停倾斜效果

请注意, 倾斜() 函数在一个 如果 当浏览器宽度大于 980px 时将执行的语句。 这将确保效果只发生在桌面上。

这是结果。

向行添加倾斜悬停效果

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

这是如何做到的。

复制行并将唯一的 CSS 类添加到行

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

  • CSS 类:et-row-js-tilt

在divi中添加悬停倾斜效果

添加 jQuery

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

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

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

在divi中添加悬停倾斜效果

这是结果。

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

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

在某些情况下,为一列模块添加倾斜效果会很有帮助。 这将允许您使用 Divi 在一个列中设计多个模块,然后将所有这些元素倾斜作为一个单元。 为了给您提供一个示例,我们将向具有图像模块、文本模块和按钮模块的列添加倾斜悬停效果。

添加新行

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

在divi中添加悬停倾斜效果

添加图像模块

在第 2 列(中间列)内,添加一个新的图像模块。

在divi中添加悬停倾斜效果

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

在divi中添加悬停倾斜效果

添加文本模块

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

<h2>Local Organic</h2>

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

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

在divi中添加悬停倾斜效果

添加按钮模块

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

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

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

在divi中添加悬停倾斜效果

列设置

三个模块完成后,打开这些模块的父列(第 2 列)的设置并更新以下内容:

  • 背景颜色:#f5cee6

在divi中添加悬停倾斜效果

  • 内边距:50px(上下),20px(左右)

在divi中添加悬停倾斜效果

将 CSS 类添加到列

在高级选项卡下,添加以下 CSS 类:

  • CSS 类:et-column-js-tilt

在divi中添加悬停倾斜效果

添加 jQuery 以将倾斜效果应用于列

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

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

在divi中添加悬停倾斜效果

这是最终结果。

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

对于更高级的悬停倾斜效果,我们可以在柱子的内部模块中添加 3D 视差效果。 使用组合看法变换:translateZ(),当悬停倾斜效果激活时,我们可以让列中的每个模块在 3d 空间中弹出。

这是如何做到的。

复制上一行

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

在divi中添加悬停倾斜效果

添加唯一列类

然后使用唯一的 CSS 类更新中间列(第 2 列),如下所示:

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

在divi中添加悬停倾斜效果

自定义 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 向列添加了另一个基本的倾斜函数。 但是,只要倾斜效果处于活动状态,代码还会将一个新类(“tilt-active”)切换到列。 我们可以使用这个新类来应用 变换: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);
  }

在divi中添加悬停倾斜效果

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

最终结果

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

最后的想法

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

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

干杯!

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题