Divi 的新滚动效果为您构建的页面带来了大量新的设计可能性。 您可以为每个容器添加自定义滚动效果并相应地同步效果。 这种设计自由很容易帮助您以优雅的方式突出某些内容。 在本教程中，我们将向您展示如何在标题中添加滚动动作效果。 这样，您可以更加强调您的标题并让您的访问者参与其中。 您还可以免费下载 JSON 文件！
让我们开始吧。
预览
在深入学习本教程之前，让我们快速浏览一下不同屏幕尺寸的结果。
示例 #1
桌面
移动的
示例 #2
桌面
移动的
示例#3
桌面
移动的
免费下载滚动运动效果部分布局
要掌握免费的部分布局，您首先需要使用下面的按钮下载它们。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者，您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
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
- 渐变类型：线性
- 渐变方向：237度
浆纱
也修改行的大小设置。
- 使用自定义装订线宽度：是
- 天沟宽度：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
- 结束偏移：10
淡入淡出
也为此模块使用淡入淡出效果。
- 启用淡入和淡出：是
- 起始不透明度：100%
- 中等不透明度：100%
- 0% – 90%（桌面）
- 0% – 95%（平板电脑和手机）
- 结束不透明度：0%
旋转
我们还将应用旋转效果。
- 启用旋转：是
- 起始旋转：0°
- 中间旋转：0°
- 0% – 90%（桌面）
- 0% – 95%（平板电脑和手机）
- 结束旋转：90°
文本模块 #2
水平运动
然后，在您的部分中打开第二个文本模块并应用以下水平运动设置：
- 启用水平运动：是
- 起始偏移量：0
- 中偏移：0
- 结束偏移：-10
淡入淡出
继续使用淡入和淡出滚动运动效果。
- 启用淡入和淡出：是
- 起始不透明度：100%
- 中等不透明度：100%
- 0% – 80%（桌面）
- 0% – 95%（平板电脑和手机）
- 结束不透明度：0%
旋转
并通过添加旋转滚动效果来完成模块的设置。
- 启用旋转：是
- 起始旋转：0°
- 中间旋转：0°
- 0% – 80%（桌面）
- 0% – 90%（平板电脑和手机）
- 结束旋转：-90°
预览
现在我们已经完成了所有步骤，让我们最终看看不同屏幕尺寸的结果。
示例 #1
桌面
移动的
示例 #2
桌面
移动的
示例#3
桌面
移动的
最后的想法
在这篇文章中，我们向您展示了如何使用 Divi 的新滚动效果为您的标题添加滚动运动效果。 我们已经处理了三个不同的示例，但可能性确实是无穷无尽的。 您还可以免费下载 JSON 文件！ 如果您有任何问题或建议，请随时在下面的评论部分发表评论。
如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品，请务必订阅我们的电子邮件通讯和 YouTube 频道，这样您将永远是第一批了解并从这些免费内容中受益的人之一。
