你想设计背景吗 Divi 由于遮罩和图案，滚动页面时动画？ 本教程为您...
添加滚动动画 Divi 它的背景蒙版和图案是一个有用的设计技巧，可以为您的背景设计注入新的活力。 网站Web.
在本教程中，我们将向您展示如何使用 Divi （无需自定义代码）。
为此，我们将使用一条线创建一个浮动背景层 Divi 当用户滚动浏览某个部分时，我们将使用它来制作蒙版和背景图案的动画 内容.
我们认为您会喜欢这个结果。
让我们开始吧！
概观
下面是本教程的背景滚动动画的简要说明。
这个概念
这种设计的概念应该不难理解。 我们从具有渐变背景的部分开始。
然后我们创建一条定位（绝对）的线，以便它完全覆盖该部分（如覆盖）。 我们可以在行中添加背景图案。
接下来我们可以为该列添加一个背景遮罩。
然后我们添加 滚动效果 到行和列（如缩放和旋转），这将在该部分的背景中分别为图案和蒙版设置动画。
当我们隐藏部分溢出时，我们所看到的只是该部分中包含的动画。
让我们从使用 Divi Builder 创建一个页面开始
要开始，您需要执行以下操作：
从 WordPress 仪表板，转到 页面>添加新 创建一个新页面。
给它一个对你有意义的标题，然后点击 使用 Divi 生成器
然后点击 开始建设 (从头开始)
之后，您将有一块空白画布可以开始在Divi中进行设计。
另请参阅： Divi：如何使用“渐变生成器”美化您的图像
如何使用 Divi 创建滚动动画背景蒙版和图案
部分背景设计
首先，我们将跳过创建一行并直接跳到编辑主题构建器中现有的默认部分。
为了使我们的背景设计充满浏览器，我们需要为该部分添加一个垂直高度。 一种简单的方法是为该部分添加一个最小高度。
打开部分设置。 在选项卡下 设计，更新最小高度并删除填充，如下所示：
- 保证金：80 vh（顶部和底部）
- 填充：0px（顶部和底部）
为该部分设计背景渐变
我们现在可以向该部分添加自定义背景渐变。
要添加第一个渐变停止点，请确保部分设置在选项卡下打开 内容. 然后选择选项卡 背景渐变 并单击以添加新的渐变。 这将添加两种默认渐变颜色。 添加以下具有颜色和位置的渐变停止点，如下所示：
- 梯度停止：
- 0%：#4158d0
- 50%：#c850c0
- 100%：#ffcc70
然后改变线性渐变的方向：
- 渐变方向：270 度
向部分添加行
现在我们的部分已经就位，向该部分添加一个单列行。 这条线将用于我们的背景遮罩和图案滚动动画。
接下来，复制您刚刚创建的行。 第二行（重复的）将用于我们的 内容 像往常一样。
您现在应该有一个用于背景滚动动画的顶行和一个用于 内容 正常。
定制线
现在我们已经准备好部分背景渐变，我们可以将注意力转移到要用于滚动背景动画的线条上。
打开线路设置。 在选项卡下 高级，更新以下内容：
- 职位：绝对
这将允许该行与该部分重叠，而不会占用文档中的任何实际空间。
现在我们需要做的就是更新高度和宽度，使它们跨越整个部分的宽度和高度。 这将创建我们需要的叠加层和我们的第二个背景设计层。
在标签下 设计, 更新尺寸选项如下：
- Aquasize 柱高：是
- 宽度：100%
- 最大宽度：100%
- 高度：100%
- 填充：0px（顶部和底部）
现在你可能看不到这条线，但它现在完美地覆盖了整个部分的背景。
为线条创建背景图案
在这个例子中，我们将添加模式 五彩纸屑 作为线条背景。
打开线路设置。 在选项下 背景，选择标签 背景图案 并更新以下内容：
- 背景图案：五彩纸屑
- 图案：
- 颜色：#f6bef7
- 尺寸：自定义尺寸
- 宽度：35 宽
- 重复起点：中心
雷马克 ：使用 VW 长度单位可确保图案随浏览器缩放，从而保持设计的一致性和响应性。
给线条添加滚动效果
现在我们的背景图案已经到位，我们可以向该行添加滚动效果。
转到标签 高级. 在选项下 滚动效果，更新以下内容：
选择标签 水平运动 并更新以下内容：
- 启用水平运动：是
- 起始偏移：0,5（0%）
- 中间偏移：0（从 40% 到 60%）
- 结束偏移：-0,5（100%）
这会将线条背景图案向左移动 50 像素，向右移动 50 像素。
选择“放大和缩小”选项卡并更新以下内容：
- 启用向上和向下缩放：是
- 起始比例：150%（在 0% 时）
- 中量级：100%（从 40% 到 60%）
- 结束比例：150%（在 100% 时）
这将在滚动时缩放行的背景图案。
选择标签 « 旋转 » 并更新以下内容：
- 启用旋转：是
- 起始旋转：10 度（0%）
- 中间旋转：0 度（从 40% 到 60%）
- 结束旋转：-10 度（100% 时）
关键提示： 您需要将旋转保持在最低限度，否则您可能会在线条未延伸超过该部分的地方显示间隙。 如果你想增加旋转，一个好的经验法则是增加比例。 这将允许线在不暴露边缘的情况下在该部分上旋转。
向列添加具有滚动效果的背景遮罩
一旦我们的行完成，我们就可以向同一行的列添加具有滚动效果的背景遮罩。 首先，让我们添加一个背景遮罩。
为此，请打开列设置。 在选项卡下 背景遮罩，更新以下内容：
- 蒙版：图层 Blob
- 颜色：#ffffff
- 蒙版变换：水平翻转、反转
为列添加滚动效果
现在我们的背景遮罩已经到位，我们可以向列添加滚动效果。 请记住，该列已经具有从父行继承的滚动效果。
我们要做的就是沿与行相反的方向旋转列，以在滚动期间实现掩码和图案的更多分离。
转到标签 高级. 在选项下 滚动效果，选择标签 罗塔蒂ng 并更新以下内容：
- 启用旋转：是
- 起始旋转：-15 度（在 0% 时）
- 中间旋转：0 度（从 40% 到 60%）
- 结束旋转：15 度（100% 时）
隐藏部分溢出
目前，只要滚动导致它超出该部分，该线就会保持可见。
为了清理它，我们需要隐藏部分溢出。 为此，请打开部分设置。 在选项卡下 高级, 更新可见性选项如下：
- 水平溢出：隐藏
- 垂直溢出：隐藏
现在看起来好多了。
也可以看看： Divi：12种蒙版和背景图案的组合
向为此目的创建的行添加内容
至此，背景遮罩和图案滚动动画就完成了。 我们所要做的就是将我们想要的内容添加到我们之前为内容创建的行中。
对于这个例子，我们添加了一个虚拟标题，这样我们就可以看到背景动画与静态文本的效果。
最终结果
让我们来看看我们设计的最终结果。
立即下载DIVI！！！
结论
令人惊讶的是，使用 Divi 的背景选项创建如此美丽的背景是多么容易。 此外，使用 Divi 的滚动效果添加动画为这些设计带来了新的活力。
要获得不同的外观，您可以在每一层上尝试不同的蒙版和图案。 如果您想获得更多关于如何使用 面具和图案 背景，看看这些 12 种背景蒙版和图案组合
我们希望本教程能激发您的下一个 Divi 项目。 如果您有任何疑虑或建议，请联系我们 评论部分 讨论一下。
您也可以咨询 我们的资源，如果您需要更多元素来执行创建Internet网站的项目。
不要犹豫，也请咨询我们的指南 WordPress博客创建 或者那个 Divi：有史以来最好的WordPress主题.
但与此同时， 在您不同的社交网络上分享此文章.
...
