每次使用 Divi 和 GSAP 滚动元素时如何重新启动动画

当涉及为页面上的元素设置动画时，您很可能希望在元素进入视口后激活元素的动画。 使用 Divi 的内置动画设置，只要该元素进入视图并进行动画处理，它就会保持静态，直到您重新加载整个页面。 在某些情况下，您可能会寻找一种更一致的方法，在这种方法中，您的动画会随着每个视口条目重新开始。 这样做将帮助您简化访问者在您网站上的体验。 在本教程中，我们将向您展示如何使用 Divi、GSAP 和 ScrollTrigger for GSAP。 一旦掌握了该方法，您就可以将其应用于页面上的任何元素。 您也可以免费下载 JSON 文件！

让我们开始吧。

预览

在我们深入学习教程之前，让我们快速浏览一下不同屏幕尺寸的结果。

桌面

移动的

免费下载布局

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

下载文件

免费下载

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

下载

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

1. 创建截面设计

添加占位符部分

在开始创建设计之前，我们将向我们正在处理的页面添加两个占位符部分。 这样，一旦设计完成，我们就可以看到滚动体验。 或者，您可以在已设置的页面内使用该设计。 添加一个新的常规部分。

浆纱

修改截面的高度如下：

• 高度：100vh

克隆占位符部分

然后，克隆该部分一次。

在占位符部分之间添加新部分

为了创建您能够在这篇文章的预览中看到的设计，我们将在占位符部分之间添加一个新的常规部分。

添加第 1 行

列结构

继续使用以下列结构向该部分添加新行：

浆纱

还没有添加模块，打开行设置，转到设计选项卡并更改大小设置如下：

• 使用自定义装订线宽度：是
• 天沟宽度：2
• 宽度：90%
• 最大宽度：2080px

将文本模块 #1 添加到列

添加内容

然后，将第一个文本模块添加到该列并包含您选择的一些内容。

文字设置

转到模块的设计选项卡并相应地更改文本设置：

• 文字字体：蒙特塞拉特
• 文字字体粗细：重
• 文本字体样式：大写
• 文字颜色：#f9f9f9
• 字体大小：
  • 桌面：150px
  • 平板电脑和手机：11vw
• 文本行高：1.1em
• 文本对齐：居中

将文本模块 #2 添加到列

添加 H2 内容

在前一个文本模块下方添加另一个文本模块并包含一些 H2 内容。

H2 文本设置

H2 文本的样式如下：

• 标题 2 字体：蒙特塞拉特
• 标题 2 文本对齐：居中
• 标题 2 文字大小：
  • 桌面：80px
  • 平板电脑和手机：10vw

浆纱

也添加 100% 的宽度。

• 宽度：100%

位置

并在高级选项卡中重新定位整个模块。

• 位置：绝对
• 地点：中心

添加第 2 行

列结构

使用以下列结构在前一行下方添加另一行：

浆纱

还没有添加模块，打开行设置并调整大小设置如下：

• 使用自定义装订线宽度：是
• 天沟宽度：2
• 宽度：90%
• 最大宽度：2080px

第 1 列设置

然后，打开第 1 列设置。

背景图片

上传您选择的背景图片。

• 背景图片尺寸：封面
• 背景图片位置：中心

间距

接下来修改列的间距设置。

• 顶部填充：100px
• 底部填充：
  • 桌面：400px
  • 平板电脑和手机：200px
• 左填充：5.5%
• 右填充：5.5%

将文本模块 #1 添加到第 1 列

添加H4内容

然后，将文本模块添加到第 1 列，其中包含一些 H4 内容。

H4 文本设置

相应地设置 H4 文本的样式：

• 标题 4 字体：Lato
• 标题 4 字体粗细：重
• 标题 4 字体样式：大写
• 标题 4 文字大小：13px
• 标题 4 字母间距：2px

将文本模块 #2 添加到第 1 列

添加H3内容

使用一些 H3 内容，在前一个文本模块下方添加另一个文本模块。

H3 文本设置

相应地更改 H3 文本设置：

• 标题 3 字体：蒙特塞拉特
• 标题 3 文字大小：36px
• 标题 3 字母间距：1px
• 标题 3 行高：1.2em

将文本模块 #3 添加到第 1 列

添加说明内容

添加包含您选择的一些描述内容的最后一个文本模块。

文字设置

更改模块的文本设置如下：

• 文字字体：Lato
• 文字颜色：#4c4c4c
• 文字字母间距：0.5px
• 文本行高：2em

将按钮模块添加到第 1 列

添加副本

本专栏中我们需要的最后一个模块是按钮模块。 添加一些您选择的副本。

按钮设置

在设计选项卡中设置按钮样式。

• 为按钮使用自定义样式：是
• 按钮文字大小：14px
• 按钮文字颜色：#ffffff
• 按钮背景颜色：#000000
• 按钮边框宽度：0px

• 按钮字体：Lato
• 按钮字体粗细：粗体
• 按钮字体样式：大写

重用第 1 列

删除第 2 列和第 3 列

完成第 1 列及其中的所有模块后，您可以删除该行的其余两列。

克隆第 1 列两次

并通过克隆两次来重用第 1 列。

更改重复的列背景图像

确保更改每个重复列的背景图像。

更改重复列中的内容

随着模块内容。

将 Transform Translate 添加到第 2 列设置

然后，打开第 2 列设置并转到设计选项卡。 在那里，添加一些跨不同屏幕尺寸的转换转换值以完成设计。

• 剩下：
  • 桌面：50px
  • 平板电脑和手机：0px

2. 将重启动画技术应用到设计中

将 CSS 类添加到第 2 行

现在我们的设计已经到位，我们可以专注于重启动画技术。 为此，我们将同时针对多个模块。 首先，打开第二行的设置并应用以下 CSS 类：

• CSS 类：trigger-animation-row

将代码模块添加到第 1 行

我们在本教程的上一步中添加的 CSS 类将帮助我们一次定位该行中的所有模块。 为了创建重启动画，我们使用了一些 JQuery 代码、GSAP JavaScript 库和 GSAP 的 ScrollTrigger 库。 要添加此代码，我们将在第 1 行的第二个文本模块下方插入一个新的代码模块。

添加 GSAP 和 ScrollTrigger 库

确保在新脚本标签中添加 GSAP 和 ScrollTrigger 库。

• https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js
• https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js

添加新脚本标签

然后，在库脚本标签下方添加新的脚本标签。

添加 GSAP + ScrollTrigger 功能

在新的脚本标签中，我们将复制粘贴以下 JQuery 代码行：

jQuery(document).ready(function($){

var $module = $('.trigger-animation-row .et_pb_module');

$module.each(function(){
var $thisModule = $(this);

gsap.from($thisModule[0], {
scrollTrigger: {
trigger: this,
start: "bottom bottom",
end: "center top",
scrub: false,
repeat: -1,
toggleActions:'restart none none reset'
},
opacity: 0,
x: -100,
scale: 1.1,
duration: 2,
ease: "back"
});
});
});

此代码将同时针对所有行模块，并在访问者再次进入视口时重新启动动画。 在这种情况下，动画非常简单且最小。 但是，使用 GSAP 和 ScrollTrigger，您可以创建您想要的任何类型的动画，因此绝对值得研究！

预览

现在我们已经完成了所有步骤，让我们最后看看不同屏幕尺寸的结果。

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了如何在元素进入视口后立即重新启动动画。 无论访问者如何滚动，这种方法都可以帮助您创建一致的体验。 您也可以免费下载 JSON 文件！ 如果您有任何问题或建议，请随时在下面的评论部分发表评论。

如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品，请确保订阅我们的电子邮件时事通讯和 YouTube 频道，这样您将永远是第一批了解此免费内容并从中受益的人之一。