如何使用 Letterize.js 和 Anime.js 在 Divi 中添加高级文本动画

在为您的网站添加额外优势时，Divi 的内置动画提供了大量的可能性。 但是，这些动画允许您一次向一个容器添加一个动画。 虽然在大多数情况下这通常已经绰绰有余，但有些项目您会想要加倍努力。 例如，您可能会发现自己想要添加高级文本动画。 在本教程中，我们将向您展示如何做到这一点。 如果您想学习如何将 Divi 作为框架与外部 Javascript 库相结合，本教程是一个很好的垫脚石。 我们将使用 Divi 的内置元素和选项创建我们的整个设计，然后使用 letterize.js 和anime.js 库定位我们的文本模块以创建高级文本动画。 一旦您理解了该方法，您将能够创建您可以想象的任何类型的高级文本动画！

让我们开始吧！

预览

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

桌面

移动的

免费下载高级文本动画布局

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

下载文件

免费下载

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

下载

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

1. 创建英雄部分设计

添加新部分

间距

首先创建一个新页面或打开一个现有页面。 在您的页面内，添加一个新部分。 打开部分设置并修改不同屏幕尺寸的顶部和底部填充。

• 顶部填充：180 像素（桌面）、100 像素（平板电脑）、50 像素（手机）
• 底部填充：180 像素（桌面）、100 像素（平板电脑）、50 像素（手机）

添加第 1 行

列结构

继续使用以下列结构添加新行：

间距

在不添加任何模块的情况下，打开行设置并删除所有默认的底部填充。

• 底部填充：0px

将文本模块 #1 添加到列

添加 H1 副本

我们在这一行中唯一需要的模块是文本模块。 添加一些您选择的 H1 内容。

H1 文本设置

转到模块的设计选项卡并按如下方式修改 H1 文本设置：

• 标题字体：蒙特塞拉特
• 标题文字颜色：rgba(232,232,232,0.41)
• 标题文字大小：80 像素（桌面）、50 像素（平板电脑）、40 像素（手机）
• 标题字母间距：-10px（桌面）、-4px（平板电脑）、-3px（手机）
• 标题行高度：0.6em（桌面）、0.7em（平板电脑）、0.8em（手机）

添加第 2 行

列结构

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

浆纱

打开行设置并在大小设置中更改最大宽度。

• 最大宽度：1680px

间距

接下来删除所有底部边距和填充。

• 下边距：0px
• 底部填充：0px

将图像模块添加到列

上传插图

然后，添加一个图像模块并上传您可以在本文开头下载的文件夹中找到的免费插图。

浆纱

移至模块的设计选项卡并强制图像全角。

• 强制全角：是

间距

接下来添加一些负底边距。

• 底部边距：-12%

动画片

并通过添加以下动画设置完成模块设置：

• 动画风格：淡入淡出
• 动画延迟：3000ms

添加第 3 行

列结构

到下一行和最后一行。 使用以下列结构：

间距

转到行的设计选项卡并添加一些自定义填充值。

• 顶部填充：10%
• 底部填充：5%
• 左填充：3%
• 右填充：3%

盒子阴影

然后，启用一个微妙的框阴影。

• 框阴影模糊强度：80px
• 阴影颜色：rgba(0,0,0,0.06)

动画片

并通过添加以下动画完成行设置：

• 动画风格：淡入淡出
• 动画延迟：3000ms

将文本模块 #2 添加到列

添加内容

是时候添加模块了。 我们需要的第一个模块是带有一些描述内容的文本模块。

文字设置

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

• 文字字体：Lato
• 文字大小：18px
• 文字字母间距：1px
• 文本行高：2.7em

将按钮模块添加到列

添加副本

我们需要的最后一个模块是按钮模块。 输入您选择的一些副本。

按钮设置

转到模块的设计选项卡并按如下方式更改按钮设置：

• 为按钮使用自定义样式：是
• 按钮文字大小：16px
• 按钮文字颜色：#171cff
• 按钮边框宽度：0px
• 按钮边框半径：0px

• 按钮字体：蒙特塞拉特
• 按钮字体样式：大写

间距

然后，在间距设置中应用以下填充值：

• 顶部填充：2%
• 底部填充：2%
• 左填充：5%
• 右填充：5%

盒子阴影

通过添加以下框阴影来完成模块设置：

• 框阴影垂直位置：5px
• 框阴影扩散强度：-2px
• 阴影颜色：#171cff

2. 将 CSS 类添加到标题

打开文本模块 #1 并单击文本选项卡

现在我们已准备好所有设计元素，是时候将高级文本动画添加到我们的标题中了。 打开包含 H1 副本的文本模块并选择文本选项卡。

将 CSS ID 添加到 H1 标签

在 H1 中添加自定义 CSS ID。

• ID="标题复制"

3.添加Letterize和动漫库

将代码模块添加到列

为了创建动画，我们使用了 letterize.js 和anime.js 库。 要添加这些库，请在最后一行的列中插入一个新的代码模块。

添加两个库

然后，添加两个不同的脚本标签，其中包含以下指向库的源：

• src="https://cdn.jsdelivr.net/gh/WojciechWKROPCE/letterize-js/lib/letterize.min.js"
• src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"

4.添加动画代码

个人级别的字母动画

在本教程的最后一部分，我们将添加属于 letterize.js 和anime.js 库的动画代码。 为了实现您在这篇文章的预览中看到的效果，我们将应用两种类型的动画。 第一个动画单独且连续地应用于每个字母。 这是通过 letterize.js 库实现的。 该库与下面代码的第一部分相结合，将副本中的每个字母放在一个单独的跨度内。 然后，这些跨度将在整个动画过程中单独定位。 确保将下面的代码放在脚本标记之间。

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

var headlineCopy = new Letterize({
targets: "#headlineCopy"
});

var animation = anime.timeline({
targets: '#headlineCopy span',
delay: anime.stagger(20),
loop: false
});

animation
.add({
opacity: [0, 1],
scale: [0, 1.2, 1],
duration: 1500,
elasticity: 600,
color: '#000',
})

.add({
color: '#00FFF7',
})

.add({
color: '#D2BEFB',
})

.add({
color: '#171cff',
});

});
});

每个 add 函数代表动画时间线中的一个动画。 这些动画适用于单个级别的每个字母。 您可以根据需要修改这些添加函数，添加新函数或删除当前函数，只需确保最后一个添加函数用“;”正确关闭。 最后（如您在上面的代码中所见）。 您可以在这些添加函数中添加不同的 CSS 属性。 您可以在anime.js 文档示例中找到有关属性及其使用方式的更多信息。 在本教程中，我们特意添加了多个动画来展示时间线的工作方式，但您可能希望为自己的项目使用更微妙或更短的动画。

句子动画

添加动画的第一部分（分别针对每个字母）后，我们将转到动画的第二部分。 这部分将整个副本作为一个整体。 动画方法同上； 我们将整个模块放置在时间轴动画中。 每个 add 函数代表该时间线内的不同动画。 您可以修改这些添加功能、添加新功能或删除当前功能。 确保将此新代码放置在脚本代码的结尾之前，您可以在下面的打印屏幕中看到。

anime.timeline({loop: false})

.add({
targets: '#headlineCopy',
lineHeight: '1em',
delay: '1500'

})

.add({
targets: '#headlineCopy',
translateX: ['-5%', 0],
letterSpacing: '-2px',
});

为 Span 添加自定义 CSS

现在，由于我们为每个字母创建了一个单独的跨度，我们需要更改每个跨度的显示属性以允许字母彼此相邻显示。 为此，我们将向代码模块添加一些 CSS 代码。 确保将代码放在样式标签之间。

#headlineCopy span {
display: inline-block;
}

预览

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

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了如何为标题创建高级文本动画。 我们在 Divi 内部构建了整个设计，并将框架与 letterize.js 和anime.js 库相结合。 如果您有任何问题或建议，请随时在下面的评论部分发表评论！

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