如何使用 Divi 的滚动效果动画视差背景图像

将滚动效果与视差背景图像相结合可以为您的访问者创造出非常神奇的设计。 由于当用户向下滚动页面时，视差效果已经使图像处于运动状态，因此添加额外的滚动效果（如水平运动和旋转）可以真正使设计与众不同，并为更具创意的布局打开大门。

在本教程中，我们将介绍如何使用 Divi 的滚动效果为视差背景图像设置动画。 我们将在多个文本模块上使用相同的背景图像来设计用于显示一小段文本的独特布局。

让我们开始吧。

抢先看

免费下载动画视差背景图像布局

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

下载文件

免费下载

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

下载

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

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

让我们进入教程，好吗？

你需要什么开始

首先，您需要执行以下操作：

1. 如果您还没有安装并激活 Divi 主题。
2. 在WordPress中新建一个页面，在前端使用Divi Builder编辑页面（visual builder）。
3. 选择“从头开始构建”选项。

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

使用 Divi 的滚动效果创建动画视差背景图像

添加列

首先，创建一个单列行。

创建文本模块

然后在列中添加一个文本模块。

文字内容

在正文内容中添加字母“p”。

将视差背景图像添加到文本模块

接下来，将视差背景图像添加到文本模块，如下所示：

• 背景图片：插入图片
• 使用视差效果：是
• 视差方法：CSS

设计文本

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

• 文字字体：蒙特塞拉特
• 文字字体样式：TT
• 文字文字颜色：#ffffff
• 文字文字大小：100px（桌面），70px（手机）
• 文字字母间距：5px（手机）
• 文本行高：1em
• 文本对齐：居中
• 填充：顶部 250 像素，底部 250 像素

填充是创建暴露视差背景图像所需的必要高度。

行设置

现在我们的文本模块已经完成，打开行设置并更新以下内容：

• 使用自定义装订线宽度：是
• 天沟宽度：1
• 宽度：100%

第 1 列设置

然后单击打开列设置。

在高级选项卡下，更新以下滚动效果：

在水平运动效果选项卡下...

• 启用水平：是
• 起始偏移：-2（在 0% 视口处）
• 中间偏移：0（40%-60%）
• 结束偏移：-2（100%）

在旋转效果选项卡下...

• 启用旋转：是
• 开始旋转：20 度（在 0% 视口处）
• 中间旋转：0度（40%-60%）
• 结束旋转：-20deg（100%）

创建第 2 列

即使我们从一列布局开始，我们也将创建总共 5 列。 复制列及其所有内容和设置以创建设计所需的下四个列会更容易。

复制整个第一列（使用文本模块）以创建第二列。

更新第 2 列滚动效果

然后更新第 2 列的滚动效果，如下所示：

在旋转效果选项卡下...

• 起始旋转：-20deg
• 结束旋转：20度

创建第 3 列

要创建第 3 列，请复制第 2 列。

更新第 3 列滚动效果

然后按如下方式更新第 3 列设置：

在水平运动效果选项卡下...

• 启用水平运动：否

在旋转效果选项卡下...

• 起始旋转：20度
• 结束旋转：10deg

创建第 4 列

要创建第 4 列，请复制第 2 列，然后将其拖到底部。

更新第 4 列滚动效果

然后打开第 4 列的设置并更新以下内容：

在水平运动效果选项卡下...

• 起始偏移：2
• 结束偏移：2

在旋转效果选项卡下...

• 起始旋转：-15deg
• 结束旋转：20度

创建第 5 列

最后，要创建第 5 列，请复制第 4 列。

更新第 5 列滚动效果

然后按如下方式更新第 5 列设置：

在旋转效果选项卡下...

• 起始旋转：15度
• 结束旋转：-15deg

更新文本模块字母

接下来，使用内嵌文本选项更改每列中的字母，以便它们共同拼写“power”一词。

更新中间文本模块设计

打开第 3 列中的文本模块设置并更新以下内容：

• 文字字体：Montserrat Subrayada
• 文字文字颜色：#e0e722
• 文字文字大小：150px（桌面）
• 文本行高：100px

为移动设备更新第一个文本模块内容

为了在手机上显示单个文本模块，我们需要在平板电脑和手机显示屏上使用以下内容更新第 1 列中的文本模块：

平板电脑和手机上的正文内容：

<p>po<span style="color: #edf000; font-family: 'Montserrat Subrayada';">w</span>er</p>

更新第 1 列设置

接下来，打开第 1 列的设置并更新以下内容：

• 圆角（桌面）：100% 左上角
• 圆角（平板电脑和手机）：左上角 40%，右下角 40%

在高级选项卡下，将以下自定义 CSS 添加到主要元素的平板电脑显示中：

width: 100% !important;

这将确保该列跨越平板电脑和手机显示屏上的行的整个宽度。

隐藏平板电脑和手机显示屏上的其余列

现在第 1 列将跨越平板电脑和手机上的行的整个宽度，我们可以隐藏/禁用平板电脑和手机上的其余列。 为此，请打开第 2-5 列的设置并禁用手机和平板电脑上每一列的可见性。

更新第 5 列设置

然后打开第5列设置，添加一个互补圆角如下：

• 圆角（桌面）：100% 右下角

将背景设计添加到部分

要完成设计，请使用背景设计更新截面设置，如下所示：

• 背景颜色：#e0e722

• 顶部分隔线样式：见截图
• 顶部分隔线颜色：#222222
• 顶部分隔线高度：650 像素（桌面）、500 像素（平板电脑和手机）

• 底部分隔线样式：见截图
• 底部分隔线颜色：#222222
• 底部分隔线高度：500 像素（桌面）、400 像素（平板电脑和手机）

最后结果

这是桌面上的最终设计。

这是平板电脑和手机显示屏上的后备设计。

最后的想法

视差背景图像以真正神奇的方式与滚动效果相结合。 使用视差背景图像的唯一缺点是缺乏对移动设备的支持，但通过 Divi 提供的响应设置，我们可以轻松创建回退。 我希望这个优雅的设计能给你的一天增添一些灵感。

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

干杯!