您可以使用 Divi 将 3 种轻松的滚动运动效果添加到您的头条新闻中

Divi 的新滚动效果为您构建的页面带来了大量新的设计可能性。 您可以为每个容器添加自定义滚动效果并相应地同步效果。 这种设计自由可轻松帮助您以优雅的方式突出显示某些内容。 在本教程中，我们将向您展示如何向标题添加滚动运动效果。 这样，您就可以特别强调您的头条新闻，并让您的访问者参与其中。 您也可以免费下载 JSON 文件！

让我们开始吧。

预览

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

示例#1

桌面

移动的

示例#2

桌面

移动的

示例 #3

桌面

移动的

免费下载滚动运动效果部分布局

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

下载文件

免费下载

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

下载

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

1. 在新页面或现有页面上构建您的英雄部分设计

添加新部分

背景颜色

首先向您正在处理的页面添加一个新部分。 打开部分设置并将背景颜色更改为白色。

• 背景颜色：#FFFFFF

间距

移至设计选项卡并修改间距值。

• 顶部填充：15vw（桌面）、20vw（平板电脑）、25vw（手机）
• 底部填充：0vw

溢出

并且为了确保滚动效果不会导致任何水平滚动条出现，我们还将隐藏该部分的溢出。

• 水平溢出：隐藏
• 垂直溢出：隐藏

添加第 1 行

列结构

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

浆纱

在不添加任何模块的情况下，打开行设置并在大小设置中修改宽度和最大宽度。

• 宽度：90%
• 最大宽度：100%

间距

也删除所有默认的顶部和底部填充。

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

将文本模块 #1 添加到列

添加H1内容

我们在这一行中唯一需要的模块是带有一些 H1 内容的文本模块。

H1 文本设置

相应地更改模块的 H1 文本设置：

• 标题字体：Playfair Display
• 标题字体粗细：粗体
• 标题文本对齐方式：居中
• 标题文字颜色：#000000
• 标题文字大小：6vw

添加第 2 行

列结构

然后，使用以下列结构添加另一行：

渐变背景

尚未添加任何模块，打开行设置并使用渐变背景。

• 颜色 1：#444444
• 颜色 2：#000000
• 渐变类型：线性
• 梯度方向：237deg

浆纱

也修改行的大小设置。

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

间距

然后，添加一些自定义的顶部和底部填充。

• 顶部填充：0vw
• 底部填充：10vw（台式机）、15vw（平板电脑）、20vw（手机）

将文本模块 #2 添加到列

添加内容

我们在这一行中需要的第一个模块是一个包含一些内容的文本模块。

文字设置

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

• 文字字体：Playfair Display
• 文字颜色：#dddddd
• 文字大小：6vw
• 文本行高：1em
• 文字阴影模糊强度：0.29em
• 文字阴影颜色：#ffffff
• 文本对齐：居中

将文本模块 #3 添加到列

添加内容

然后，添加另一个具有您选择的描述内容的文本模块。

文字设置

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

• 文字字体：Open Sans
• 文字颜色：#e8e8e8
• 文字大小：0.9vw（桌面）、2vw（平板电脑）、2.5vw（手机）
• 文本行高：2em
• 文本对齐：居中

浆纱

也修改大小设置。

• 宽度：40%（桌面），90%（平板电脑和手机）
• 模块对齐：居中

间距

并在不同的屏幕尺寸中包含一些顶部和底部边距。

• 上边距：10vw（桌面）、15vw（平板电脑）、20vw（手机）
• 下边距：3vw（桌面）、8vw（平板电脑）、13vw（手机）

将按钮模块添加到列

添加副本

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

结盟

继续更改设计选项卡中的按钮对齐方式。

• 按钮对齐：居中

按钮设置

然后，按如下方式设置按钮样式：

• 为按钮使用自定义样式：是
• 按钮文字大小：0.8vw（桌面）、1.5vw（平板电脑）、2.5vw（手机）
• 按钮文字颜色：#ffffff
• 按钮边框颜色：#ffffff
• 按钮边框半径：1px
• 按钮字体：Open Sans
• 按钮字体粗细：粗体
• 按钮字体样式：大写

间距

并包括一些跨不同屏幕尺寸的自定义填充值。

• 顶部填充：1vw（桌面）、2vw（平板电脑）、3vw（手机）
• 底部填充：1vw（桌面）、2vw（平板电脑）、3vw（手机）
• 左填充：2.5vw（台式机）、5vw（平板电脑）、8vw（手机）
• 右填充：2.5vw（桌面）、5vw（平板电脑）、8vw（手机）

2. 应用滚动效果

示例#1

文本模块 #1

水平运动

现在我们已经设计了我们英雄部分的整体外观和感觉，是时候将不同的滚动运动效果应用到我们的副本中了。 要重新创建第一个示例，请打开第一个文本模块并使用以下水平运动：

• 启用水平运动：是
• 起始偏移：0
• 中间偏移：0
  • 0% – 80%（桌面）
  • 0% – 95%（平板电脑和手机）
• 结束偏移：-10

淡入淡出

我们还将添加淡入淡出效果。

• 启用淡入淡出：是
• 起始不透明度：100%
• 中等不透明度：100%
  • 0% – 70%（桌面）
  • 0% – 95%（平板电脑和手机）
• 结束不透明度：0%

文本模块 #2

水平运动

然后，打开您部分中的第二个文本模块并应用以下水平运动：

• 启用水平运动：是
• 起始偏移：10
• 中间偏移：0
  • 10% – 70%（桌面）
  • 10% – 95%（平板电脑和手机）
• 结束偏移：10

淡入淡出

随着匹配的淡入淡出效果：

• 启用淡入淡出：是
• 起始不透明度：0%
• 中等不透明度：100%
  • 35% – 60%（桌面）
  • 35% – 95%（平板电脑和手机）
• 结束不透明度：0%

示例#2

文本模块 #1

垂直运动

想要重新创建第二个滚动运动效果吗？ 打开您部分中的第一个文本模块并添加以下垂直运动：

• 启用垂直运动：是
• 起始偏移：0
• 中间偏移：0
  • 90%（桌面）
  • 95%（平板电脑和手机）
• 结束偏移：-8

放大和缩小

也添加缩放效果。

• 启用向上和向下扩展：是
• 起始比例：20%
• 中等规模：100%
  • 20% – 80%（桌面）
  • 20% – 95%（平板电脑和手机）
• 结束比例：20%

文本模块 #2

垂直运动

然后，打开第二个文本模块并使用以下垂直运动设置：

• 启用垂直运动：是
• 起始偏移：0
• 中间偏移：0
  • 15% – 70%（桌面）
  • 15% – 90%（平板电脑和手机）
• 结束偏移：-8

放大和缩小

接下来添加缩放效果。

• 启用向上和向下扩展：是
• 起始比例：0%
• 中等规模：100%
  • 30% – 70%（桌面）
  • 30% – 90%（平板电脑和手机）
• 结束比例：100%

模糊

并通过向您部分的第二个文本模块添加模糊效果来完成滚动效果。

• 启用模糊：是
• 起始模糊：10px
• 中间模糊：0px
  • 40% – 73%（桌面）
  • 40% – 95%（平板电脑和手机）
• 结束模糊：100px

示例 #3

文本模块 #1

水平运动

最后但并非最不重要的一点是，我们将向您展示如何重新创建第三个滚动运动效果。 打开该部分的第一个文本模块并添加水平运动效果。

• 启用水平运动：是
• 起始偏移：0
• 中间偏移：0
  • 0% – 90%
• 结束偏移：10

淡入淡出

也为此模块使用淡入淡出效果。

• 启用淡入淡出：是
• 起始不透明度：100%
• 中等不透明度：100%
  • 0% – 90%（桌面）
  • 0% – 95%（平板电脑和手机）
• 结束不透明度：0%

旋转

我们还将应用旋转效果。

• 启用旋转：是
• 起始旋转：0°
• 中间旋转：0°
  • 0% – 90%（桌面）
  • 0% – 95%（平板电脑和手机）
• 结束旋转：90°

文本模块 #2

水平运动

然后，打开您部分中的第二个文本模块并应用以下水平运动设置：

• 启用水平运动：是
• 起始偏移：0
• 中间偏移：0
  • 0% – 90%
• 结束偏移：-10

淡入淡出

继续使用淡入淡出滚动运动效果。

• 启用淡入淡出：是
• 起始不透明度：100%
• 中等不透明度：100%
  • 0% – 80%（桌面）
  • 0% – 95%（平板电脑和手机）
• 结束不透明度：0%

旋转

并通过添加旋转滚动效果来完成模块的设置。

• 启用旋转：是
• 起始旋转：0°
• 中间旋转：0°
  • 0% – 80%（桌面）
  • 0% – 90%（平板电脑和手机）
• 结束旋转：-90°

预览

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

示例#1

桌面

移动的

示例#2

桌面

移动的

示例 #3

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了如何使用 Divi 的新滚动效果为您的标题添加滚动运动效果。 我们已经处理了三个不同的例子，但可能性确实是无穷无尽的。 您也可以免费下载 JSON 文件！ 如果您有任何问题或建议，请随时在下面的评论部分发表评论。

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