代码观察者

如何使用 Divi 创建动态 3D Mousemove 动画效果

Rifat Divi Tutorials Feb 28, 2022

在Divi Builder的帮助下，我们可以做许多独特而富有创意的设计。 今天我们将看到如何使用 Divi 可视化页面构建器创建动态 3D 动画，该构建器与鼠标光标的移动交互。 通常，我们会在对象上进行悬停或单击动画，但在这里，我们将为对象设置动画，该对象将随着鼠标移动向不同方向移动。 此外，you’ll 将了解如何向执行交互式动画的对象添加悬停 3D 效果并为设计注入活力！

如何使用 Divi 创建动态 3D Mousemove 动画效果

我们将使用Divi builder进行设计，稍后，我们将添加一些 CSS 和 jQuery 代码来创建动画功能，使设计更加生动！ 您可以使用此设计以一种新的方式向访问者展示您的产品！

最终设计

如果一切都按我们的计划进行，那么我们的最终设计将看起来很像。

在 Divi 上创建动态 3D 鼠标移动效果

任务 1：页面设置

由于您想在您的网页上创建此效果，我们相信您已经安装了最新版本的 Divi。 现在，“ 从仪表板添加一个 page”，根据需要为其命名并使用 Divi builder 扩展它。

创建令人惊叹的网站

使用最好的免费页面构建器 Elementor

现在开始

现在从 Scratch” 选择 “Build 并开始 ahed。

任务 2：创建悬停容器 & 卡

要在悬停时激活 3D 动画，我们将定位该行。 我们将其称为 “Hover container”。 另一方面，该列将充当卡片，在将鼠标悬停在该行上期间将使用子元素进行动画处理。

截面样式

打开默认部分设置并更新以下内容

  • 背景颜色 - RGBA(68,55,99,0.1)。 这里 0.1 是不透明度。
  • 在顶部和底部添加“7vh”填充。

悬停容器

现在向准备好的部分添加一列行。

现在使用以下更改更新行设置。

  • 启用“自定义装订线宽度”并将值更改为 1
  • 宽度 100%
  • 最大宽度：70%（台式机）、60%（平板电脑）、50%（移动设备）
  • 填充：上下 7vh，左右 5vw。

在高级选项卡下，添加自定义 CSS 类。

  • CSS 类：et-hover-container

此外，将 CSS 代码添加到主元素。

display:flex;
align-items:center;
justify-content:center;

卡片

完成行更新后，打开列设置以设置卡片样式。

  • 背景颜色 #ffffff
  • 填充：顶部 7vh，底部 7vh，左侧 5%，右侧 5%
  • 圆角：30px
  • 盒子阴影：见截图
  • 盒子阴影垂直位置：0px
  • 盒子阴影模糊强度：80px
  • 阴影颜色：rgba(0,0,0,0.2)

在高级选项卡下，添加自定义 CSS 类。

  • CSS 类：et-mousemove-card

此外，在 main 元素下添加此 CSS 代码。

max-width: 600px;

现在将水平和垂直溢出的溢出属性设置为可见。

任务 3：创建卡片元素

带标志的圆圈背景

对于我们卡片的第一个元素，我们将添加一个圆形背景，其中包含我们的徽标，该徽标将位于我们的主要产品图像后面。

现在在列上添加“文本”并删除默认文本以保持正文为空。

是时候添加渐变背景了。

  • 渐变背景左色#443763
  • 渐变背景正确颜色 #EA3900
  • 将渐变方向设置为 90 度

除了渐变色，还添加一个徽标作为背景图像。 图像大小应为 60px x 60px 并将背景图像大小值设置为“实际大小”

在“设计”选项卡上，在“尺寸”部分更改如下值。 为桌面设置宽度值 160 像素，为平板电脑设置 150 像素，为智能手机设置 80 像素。

此外，将高度值设置为与宽度相同。 最后，在“边框”部分下将圆角设置为 80%。

在“高级”选项卡上，更新位置，如下所示。

  • 位置：绝对
  • 位置 : 顶部中心
  • 垂直偏移：15%

卡片图像

现在，我们完成了徽标部分，让我们在卡片上添加产品图像。 我们将在之前的文本模块下添加一个新的图像模块。

现在上传产品图片。 确保图像是透明的并且是 PNG 格式。 在这里，我们使用红色法拉利的图像。

在“设计”选项卡上，如下所述更改值。

  • 图像对齐：居中
  • 宽度：90%
  • 边距：12vh 顶部和 5vh 底部（根据需要调整值）

在“高级”选项卡部分，为图像添加自定义 CSS 类。

  • CSS 类：et-card-image

车头

现在我们将为卡片创建一个标题。 有了我们的汽车图像，让我们在图像下添加一个文本模块来创建我们的卡片标题。

在正文中，删除默认文本并添加下面给出的 HTML 的 H2 标题。

<h2>The <span style="color: #ea3900:"> Ferrari</span> Car</h2>

现在，在设计部分更改以下值：

  • 标题 2 字体：Bebas Neue
  • 标题 2 文本对齐：居中
  • 标题 2 文本颜色：#443763
  • 标题 2 文字大小：桌面 75 像素，平板电脑 60 像素，移动设备 45 像素。
  • 标题 2 字母间距：0.05em
  • 保证金：底部 4vh

在“高级部分”添加自定义 CSS 类

  • CSS 类：et-card-heading

卡信息

现在我们将添加有关卡的信息。 我们将为 info 添加另一个文本模块，因为这将允许我们为每个模块添加不同的 3D 动画效果。 让我们在标题文本模块下添加一个新的文本模块。

现在将以下文本内容添加到正文中。

<p>The one and only Ferrari Car <br>(By CodeWatchers)</p>

在设计选项卡下，更新以下内容：

  • 文字字体粗细：半粗体
  • 文字大小：18px（桌面）和 16px（平板电脑和手机。）
  • 文字行高：1.8em
  • 文字对齐：居中
  • 保证金：4vh

现在向这个模块添加一个自定义 CSS 类。

  • CSS 类：et-card-info

按钮

现在在信息文本模块下添加一个新的按钮模块。 这将在卡片上添加一个按钮。

在按钮设置的“内容”选项卡上，更改按钮文本。

  • 按钮文本：出价。

在“设计”选项卡上，为按钮设置样式，如下所述。

  • 为按钮使用自定义样式：是
  • 按钮文字大小：25px（桌面）、20px（平板电脑）、16px（手机）
  • 按钮文本颜色：#ffffff
  • 按钮背景颜色：#443763
  • 按钮边框宽度：0px
  • 按钮边框半径：30px
  • 按钮字母间距：0.1em
  • 按钮字体：Bebas Neue
  • 填充（桌面）：顶部 0.5em，底部 0.5em，左侧 3em，右侧 3em
  • 填充（电话）：顶部 0.5em，底部 0.5em，左侧 2em，右侧 2em

现在添加一个自定义 CSS 类

  • CSS 类：et-card-button

结果到现在

这是我们没有动画的最终设计输出。

现在我们将添加一些自定义代码来为这个设计带来活力。

任务 4：添加 CSS & JQuery 自定义代码

由于我们的设计已经完成，我们现在将添加 CSS 和 JQuery 代码来为我们新创建的列和卡片元素提供动态 3D 鼠标移动动画效果。

为此，请在按钮模块下添加一个新代码模块。

将给定的自定义 CSS 代码粘贴到框中，并确保将代码包装在“样式”标签中。

<style>
/*add perspective to row for 3d perspective of child elements*/
.et-hover-container {
perspective: 1000px;
}
 
/*preserve-3d needed for 3d effect on card elements*/
.et-mousemove-card {
transform-style: preserve-3d;
transition: all 100ms linear !important;
}
 
/*transition timing function and duration for card elements*/
.et-card-image,
.et-popout-title,
.et-card-info,
.et-mousemove-card .et_pb_button_module_wrapper {
transition: all 750ms ease-out !important;
}
 
/*transform styles for card elements*/
.et-card-image.transform-3d {
transform: translateZ(150px) rotateZ(10deg) !important;
}
.et-card-heading.transform-3d {
transform: translateZ(150px) !important;
}
.et-card-info.transform-3d {
transform: translateZ(50px) !important;
}
.et-mousemove-card .et_pb_button_module_wrapper.transform-3d {
transform: translateZ(150px) rotateX(20deg) !important;
}
</style>

CSS 代码在代码模块的内容选项卡下将如下所示。

在 CSS 下方，添加以下 JQuery 并确保代码位于“脚本”标签内。

<script>
jQuery(document).ready(function ($) {
//Items
var $hoverContainer = $(".et-hover-container");
var $mousemoveCard = $(".et-mousemove-card");
var $cardImage = $(".et-card-image");
var $cardHeading = $(".et-card-heading");
var $cardInfo = $(".et-card-info");
var $cardButton = $(".et-mousemove-card .et_pb_button_module_wrapper");
 
//Moving Animation Event
$hoverContainer.on("mousemove", function (e) {
let xAxis = (window.innerWidth / 2 - e.clientX) / 25;
let yAxis = (window.innerHeight / 2 - e.clientY) / 25;
$mousemoveCard.css(
"transform",
`rotateY(${xAxis}deg) rotateX(${yAxis}deg)`
);
});
 
//Animate on Hover
$hoverContainer.hover(function () {
$mousemoveCard.toggleClass("transform-3d");
$cardHeading.toggleClass("transform-3d");
$cardImage.toggleClass("transform-3d");
$cardButton.toggleClass("transform-3d");
$cardInfo.toggleClass("transform-3d");
});
 
//Pop Back on mouseleave
$hoverContainer.on("mouseleave", function () {
$mousemoveCard.css("transform", `rotateY(0deg) rotateX(0deg)`);
});
});
</script>

以下代码在代码面板中应如下所示。

现在保存整个工作并在实时页面中检查整个工作。

最终输出

所以我们的整个设计看起来是这样的。 酷啊！

最后的话

我们在今天的教程中看到的 3D 动画非常简单有趣。 这是一种独特而先进的动画效果，可以通过鼠标移动来控制。 我们可以通过一些简单的 CSS 和 JQuery 编码来设计它。 毫无疑问， Divi是一个强大的页面构建器，通过自定义编码，可以为网站带来神奇的设计。

Divi WordPress Theme