如何在 Divi 中结合动画和视差以获得独特的设计

无论我们是准备一顿饭还是设计一个网站，仅凭原料并不能保证一道菜的美味或一个美丽的网站。 正是我们将这些元素结合在一起的程度才产生了所有不同。 在本教程中，我将向您展示如何以您以前从未考虑过的方式结合动画和图像视差。 如果您还不知道，动画是一个内置的 Divi 功能，可以在页面加载时添加到任何 Divi 元素。 视差也是一个 Divi 选项，允许您在滚动时为背景图像添加独特的运动。

今天，我们将使用 Divi 的内置设计设置，以各种创造性的方式结合动画和视差。 这种组合非常神奇地结合在一起，创建了一个漂亮的动画视差图像布局，当您向下滚动页面时，这些图像看起来很棒。

让我们开始吧！

抢先看

免费下载布局

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

下载文件

免费下载

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

下载

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

要将布局导入您的页面，只需提取 zip 文件并将 json 文件拖到 Divi Builder 中。

让我们进入教程好吗？

你需要什么开始

首先，您需要具备以下条件：

1. 已安装并激活 Divi 主题
2. 在前端从头开始构建的新页面（可视化构建器）
3. 用于模拟内容的图像。 您可以在 Life Coach Divi Layout Pack 中找到用于本教程的图像。

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

基本理念

这个设计概念背后的基本思想集中在背景图像上使用 CSS 视差。 由于 CSS 视差的工作方式，无论使用它的元素的大小如何，视差图像都将保持固定并自动填充浏览器窗口。 图像的固定特性允许您在 Divi 中的多个元素上使用相同的视差图像，然后使用动画移动这些元素。 动画稳定后，使用的视差背景图像将匹配并在向下滚动页面时按预期工作。

第 1 部分：创建 Divi 动画和视差设计（版本 1）

创建一个具有两列 (1/2 1/2) 行的新部分。

在添加模块之前，让我们对部分和行进行一些调整。

更新部分和行设置

首先打开section设置，取出默认padding如下：

填充：0px 顶部，0px 底部

然后打开行设置并为行提供视差背景图像。

背景图片：【上传图片】
使用视差效果：是
视差方法：CSS

这里的视差方法必须设置为 CSS 才能使设计工作。

宽度：100%
最大宽度：100%
填充：10vw 顶部，10vw 左，10vw 右

添加具有匹配视差背景的文本模块

现在我们准备开始将我们的文本模块添加到设计中。 第一个文本模块是这个设计的关键。 通过将完全相同的背景图像和 css 视差应用于文本模块，我们可以通过动画获得完全独特的效果。

继续向第 1 列添加一个新的文本模块。

然后更新文本模块设置如下：

正文内容：

<p>Hi!<br>I'm Jane...</p>

<a href="#">about me</a>

然后为文本模块提供您添加到行中的相同 css 视差背景图像。

背景图片：【上传图片】
使用视差效果：是
视差方法：CSS

文字字体：Fira Sans
文字字体粗细：轻
文字文字颜色：#ffffff
文字文字大小：70px
文本行高：1em

链接字体样式：下划线 (U)
链接文本颜色：#ffffff（默认），#881e67（悬停）
链接文字大小：30px
链接字母间距：2px

填充：顶部 20%，底部 20%，左侧 10%，右侧 10%

边框宽度：20px
边框颜色：#ffffff

然后将以下动画添加到文本模块：

动画风格：幻灯片
动画方向：右
动画持续时间：1500ms
动画强度：80%
动画开始不透明度：20%

让我们看看到目前为止的效果……

请注意动画文本模块的背景图像如何停留在行背景的匹配位置上。 这是因为它们都使用 css 视差效果共享相同的背景图像。

添加具有真实视差背景图像的第二个文本模块

此时，我们已准备好添加下一个文本模块。 下一个将使用真正的视差效果具有不同的背景图像。 我们也会给它一些动画。

向第 2 列添加一个新的文本模块。

然后用“我的博客”一词更新正文内容。

然后用真视差法添加背景图像。

背景图片：【上传图片】
使用视差效果：是
视差法：真视差

文字字体：Fira Mono
文字字体样式：TT
文本 文本对齐：居中
文字文字颜色：#ffffff
文字字母间距：10px
宽度：320px
最大宽度：320px
模块对齐：居中

边距：（桌面）：-5vw 顶部，4vw 底部
保证金（平板和手机）：3vw top
填充：顶部 70 像素，底部 70 像素

边框宽度：20px
边框颜色：#ffffff

动画风格：幻灯片
动画方向：下
动画延迟：200ms

使用新的视差背景图像创建第三个文本模块

要创建第三个文本模块，请复制您刚刚在第 2 列中创建的文本模块。

然后我们将保持背景图像不变，但我们将使用 CSS 视差方法更新视差效果。

宽度：240px
最大宽度：240px
模块对齐方式：左
边距：0px 底部
填充：顶部 170 像素，底部 170 像素，左侧 95 像素，右侧 95 像素

自定义宽度和左右填充用于创建垂直文本显示，与较长的模块设计相得益彰。

然后将动画方向更新为向上而不是向下。

动画方向：UP

最后结果

现在让我们看看最终的结果。

第 2 部分：创建动画和视差设计（版本 2）

下一个设计将通过在模块的初始动画之后加载行的视差背景图像来添加独特的动画。 为此，我们需要为将移动到内容后面的 CSS 视差背景图像严格使用单独的行。 由于我们最初将显示我们的部分背景，我们可以在行动画之前为我们的内容添加自定义背景颜色。

这是如何做到的。

首先，部署线框视图模式。 然后复制包含文本模块的行。 现在您将有两个相同的行。 接下来，删除顶行内的文本模块。 我们真正想做的就是在我们的顶排设计上抢先一步。

接下来，更新顶行的设置，如下所示：

高度：900px（桌面），2000px（平板和手机）
填充：0px 顶部，0px 底部

动画风格：幻灯片
动画方向：右
动画持续时间：1250ms
动画延迟：1800ms

我们给行设置了高度，因为默认情况下空行不会有任何高度。 所以你需要确保行的高度足以用内容覆盖你的第二行的内容。 我们还为该行设置了一个延迟动画，以便在文本模块出现后它会滑到内容后面。

重叠两行

现在我们要做的就是使用负边距将底行向上移动，以便它与我们的背景动画重叠顶行。

打开底行的设置并按如下方式更新边距：

边距：-900px 顶部（桌面），-2000px（平板电脑和手机）

然后使用该行的 css 视差方法取出背景图像，因为我们将使用顶行背景图像。

这是到目前为止的设计。 请注意第一行中的延迟背景动画以及第 1 列中文本模块的视差背景如何与其完美匹配。

添加部分背景颜色

要在行动画之前为文本模块提供初始背景颜色，您可以为该部分提供背景颜色。

打开部分设置并添加以下内容：

背景渐变左颜色：rgba(136,30,103,0.61)
背景渐变右侧颜色：#881e67
渐变类型：径向

最后结果

现在让我们看看最终的结果。

可选的混合模式和动画组合

您还可以通过向第二行添加混合模式并添加与模块动画协同工作的缩放动画来获得更多创意。

混合模式：亮度
动画风格：缩放

这是最终结果。

这是它在移动设备上的外观。

最后的想法

我希望您在我们探索了一些结合动画和视差图像的独特方法的过程中学到了一些东西。 结果绝对是独一无二的，我相信您可以轻松调整此设置以构建无数其他组合，这些组合将在您的下一个项目中看起来令人惊叹。

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

干杯!