如果您正在寻找一种使用Divi内置滚动效果创建平滑动画的方法，那么您会喜欢本教程的。 我们将向您展示如何将滚动捕捉与Divi的内置运动效果结合使用，以创建可以一次滚动浏览的全高部分。
我们将从创建第一部分开始。 因此，我们将在整个页面设计中重用本节。 为了启用滚动捕捉，我们将使用CSS滚动捕捉属性，该属性将分配给页面的各个部分，HTML，页眉和页脚。
可能的结果
在开始学习本教程之前，让我们快速浏览一下不同屏幕尺寸的结果。
1.创建一个新页面并开始设计第一部分
添加一个新页面并切换到Visual Builder
首先添加一个新页面。 输入页面标题，发布页面，然后切换到Visual Builder。
栏目设置
浆纱
进入新页面后，打开已有的部分并更改尺寸设置。
- 最低高度：100vh
主要元素
我们还向该部分添加了两行CSS代码。 这些CSS代码行将帮助我们将该部分变成滚动捕捉的捕捉点。
scroll-snap-align：开始； scroll-snap-stop：正常；
能见度
为了确保没有超出节容器的内容，我们将隐藏节溢出。
- 水平溢出：隐藏
- 垂直溢出：隐藏
添加第1行
列结构
使用以下列结构继续向该部分添加新行：
浆纱
尚未添加任何模块，请打开行设置并按如下所示修改大小：
- 使用自定义装订线宽度：是
- 装订线宽度：1
- 宽度：100％
- 最大宽度：100％
间距
我们还将删除该部分的默认顶部和底部填充。
- 最高填充：0px
- 底部填充：0px
职务
然后，我们将相应地重新定位行：
- 位置：绝对
- 地点：底部中心
将文本模块添加到列
将内容框留空
在这一行中，我们唯一需要的模块是文本模块。 确保将模块的内容框留空。
背景颜色
然后，更改背景颜色。
- 背景颜色：＃ffee00
文字设定
我们也将删除模块的文本行高度。
- 文字行高：1em
尺寸
然后，我们将转到尺寸设置并更改宽度。
- 宽度：30％
间距
我们还将通过添加一些顶部填充将模块变成一个正方形。
- 最高填充：30％
添加第2行
列结构
在下一行。 使用以下列结构：
浆纱
尚未添加任何模块，请在设计选项卡中打开行设置并更改大小设置：
- 使用自定义装订线宽度：是
- 装订线宽度：1
- 宽度：60vw
- 最大宽度：100％
间距
然后在不同的屏幕尺寸上添加自定义的上边距。
- 最高保证金：20vh（台式机），5vw（平板电脑和手机）
第2列间距
然后，我们将在第2列中打开设置并添加自定义填充值。
- 上填充：2vh（平板电脑和手机）
- 左填充：2vw
- 右填充：2vw
将图像模块添加到列1
上传图片
是时候添加mod了，将图像mod添加到第1列，然后上传您选择的图像。
浆纱
然后，我们将在模块上强制使用整个宽度。
- 强制全宽：是
将文本模块＃1添加到2列
添加H2内容
在第二列中，我们需要的第一个模块是一个文本模块 内容 H2。
H2文字设定
转到模块设计选项卡，并按如下所示更改H2文本设置：
- 标题2字体：安东
- 第2项文字大小：5vw（台式机），7vw（平板电脑），9vw（电话）
将文本模块＃2添加到2列
添加内容
在前一个文本模块下方添加另一个文本模块，然后插入 内容 您选择的描述。
文字设定
如下更改模块的文本设置：
- 文字字体：打开Sans
- 文字大小：0.8vw（桌面），2vw（平板电脑），2.5vw（电话）
- 文字行高：1,8 em
间距
并将自定义的顶部和底部边距添加到间距设置中。
- 上边距：2vw
- 底边距：2vw
将按钮模块添加到2列
添加副本
在此列中，我们需要的下一个也是最后一个模块是按钮模块。 添加您选择的副本。
按钮设定
相应地设置按钮的样式：
- 对按钮使用自定义样式：是
- 按钮文字大小：1vw（桌面），2vw（平板电脑），3vw（电话）
- 按钮文字颜色：＃333333
- 按钮边框颜色：＃333333
- 按钮半径：1px
- 按钮字体：安东
- 按钮字体样式：大写
间距
并通过添加基于屏幕尺寸的自定义值来完成模块设置。
- 高内部保证金：1vw（台式机），2vw（平板电脑），3vw（电话）
- 低内部保证金：1vw（台式机），2vw（平板电脑），3vw（电话）
- 左内部保证金：3vw（台式机），5vw（平板电脑），7vw（电话）
- 右侧互联网保证金：3vw（台式机），5vw（平板电脑），7vw（电话）
2.将滚动效果添加到不同的元素
第1行中的文本模块
垂直动画
一旦所有元素都准备就绪，就可以添加滚动效果了。 在第一行中打开文本模块，并进行一些垂直移动。
- 启用垂直运动：是
- 起始偏移量：4
- 中偏移：0
- 结束偏移：-4
- 运动效果触发器：元素中间
2号线
第1栏
水平动画
然后打开第二行的第一列并添加水平移动。
- 激活水平移动：是
- 起始偏移量：-3
- 平均偏移量：0（从40％到60％）
- 结束偏移量：-3
- 触发动作效果：元素中间
淡入和淡出
我们还将对同一列应用淡入和淡出效果。
- 激活淡入和淡出：是
- 初始不透明度：0％
- 平均不透明度：100％
- 最终不透明度：100％
- 触发动作效果：元素中间
第2栏
水平运动
然后，我们将打开第二列的参数并应用以下水平移动参数：
- 激活水平移动：是
- 起始偏移量：3
- 平均偏移量：0（从40％到60％）
- 终点偏移：3
- 触发动作效果：元素中间
淡入和淡出
具有传入和传出的淡入淡出效果。
- 激活淡入和淡出：是
- 初始不透明度：0％
- 平均不透明度：100％
- 最终不透明度：100％
- 触发动作效果：元素中间
4.重用第一节
克隆部分四次
完成第一节及其滚动效果后，您可以根据需要多次克隆它。
更改所有其他部分的背景颜色
我们将更改所有其他部分的背景颜色。
- 背景颜色：＃111111
5.添加CSS代码以启用页面HTML上的滚动捕获
将代码模块添加到页面的最后一部分
现在，要在页面的HTML上启用滚动捕获，我们将在页面最后部分的任何位置添加代码模块。
插入HTML CSS代码
这些CSS代码行将帮助我们将滚动对齐方式应用于页面的HTML代码：
<style> html {overflow-x: hidden;scroll-snap-type: y mandatory;scroll-snap-points-y: repeat(100vh);} </style>
将滚动捕捉开始添加到页眉和页脚
通过添加以下几行CSS代码，我们将确保页眉和页脚也是滚动捕获点（就像我们的小节一样）：
页眉，页脚{scroll-snap-align：start;}
到结束
在本文中，我们向您展示了如何通过结合滚动捕捉和Divi的内置运动效果来创建平滑的动画。 这是一种仅需滚动即可激活滚动效果的好方法。
滚动捕获有帮助 游客 毫不费力地浏览您的不同部分 网站Web. 我们将它与全高截面设计相结合。 您还可以免费下载 JSON 文件！ 如果您有任何问题或建议，请随时在下面的评论部分发表评论。
