如何在分区内浮动元素以在 Divi 中创建动态滚动效果
已发表: 2020-02-10当用户向下滚动页面时，部分中的浮动元素可以提供一种有效且独特的方式来显示内容。 使用 Divi，您可以简单地使用可用的内置位置选项为元素提供固定位置来浮动元素。 当您将固定元素与静态元素、动画和视差相结合时，您的内容就会变得生动起来！
在本教程中，我们将向您展示如何在 Divi 中的一个部分中浮动元素（图像和模糊模块）以创建漂亮的动态滚动效果！
让我们开始吧！
抢先看
这是我们将要构建的浮动元素设计的快速浏览。
订阅我们的 YouTube 频道
免费下载布局
要亲身体验本教程中的设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
免费下载
加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。
您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！
要将布局导入您的页面，只需提取 zip 文件并将 JSON 文件拖到 Divi Builder 中。
注意：如果要在可视模式下使用 Divi Builder 编辑项目，则需要部署线框视图模式并恢复中间部分的默认 Z 索引。
让我们进入教程，好吗？
你需要什么开始
首先，您需要执行以下操作：
- 如果您还没有安装并激活 Divi 主题。
- 在WordPress中新建一个页面，在前端使用Divi Builder编辑页面（visual builder）。
- 选择“从头开始构建”选项。 之后，您将有一个空白画布开始在 Divi 中进行设计。
- 为了使用本教程中使用的相同图像，您可以单击此处从 Candy Shop Layout Pack 下载图像。
创建一个包含三列的部分
让我们通过创建一个三列行来开始工作。
然后按如下方式更新行设置：
- 天沟宽度：1
- 宽度：100%
- 最大宽度：100%
打开第 1 列的设置并添加以下填充：
- 填充：10vw 顶部，5vw 底部
这将有助于稍微错开图像的布局并为我们的列增加一些高度。
打开第 2 列的设置并添加以下 Z 索引：
- Z指数：12
这将确保我们将添加到中间列的模糊模块将保持在该部分的所有其他内容之上。
添加静态和固定位置的图像
下一步是将浮动图像添加到我们的左右列。 其中四个图像将保持其静态（默认）位置，但我们将为其中两个提供固定位置。 这将有助于产生一些漂浮的错觉。
图像 #1（静态）
将新的图像模块添加到第 1 列。
将图像上传到模块。
更新图像的以下设计设置：
- 宽度：200px
- 模块对齐：右
- 模糊：2px
- 变换平移（Y）：-58px
- 变换平移 (X)：63px
图像 #2（固定）
在第 1 列中的第一个图像模块下添加第二个图像模块。
将新图像上传到模块。
更新图像 #2 的设计设置，如下所示：
- 宽度：200px
- 位置：固定
- 位置：左上角
- 垂直偏移：7%
- 水平偏移：5%
图像 #3（静态）
在第 1 列的第二张图片下添加第三张图片。
将新图像上传到模块。
更新图像的设计设置，如下所示：
- 宽度：300px
- 模块对齐：右
- 变换平移（Y）：179px
- 变换平移 (X)：128px
图像 #4（静态）
将第四个图像模块添加到第 3 列。
将新图像上传到模块。
更新图像 #4 的设计设置，如下所示：
- 宽度：200px
- 模块对齐：左
- 模糊：4px
- 变换平移（Y）：-9px
- 变换平移（X）：-30px
模糊效果有助于给人一种图像离得更远的错觉。
图像 #5（固定）
接下来，在第 3 列的图像 #4 下添加一个新的图像模块。
将新图像上传到模块，如下所示：
更新图像 #5 的设计设置，如下所示：
- 宽度：200px
- 位置：固定
- 位置：右下角
- 垂直偏移：7%
- 水平偏移：5%
图像 #6（静态）
在第 3 列中的图像 #5 下添加第六张也是最后一张图像。
将新图像上传到模块。
更新图像 #6 的设计设置，如下所示：
- 宽度：300px
- 模块对齐：左
- 变换平移（Y）：62px
- 变换平移（X）：-122px
添加具有固定位置的 Blurb
我们准备将最后一段内容添加到我们的部分。 这将是主要的特色简介，也将处于固定位置。
向中间列（第 2 列）添加一个模糊模块。
然后更新blurb的内容如下：
- 标题：甜蜜的交易
然后将以下 HTML 添加到文本选项卡下的正文中：
<p>Your content goes here. Edit or remove this text inline or in the module Content settings.</p> <a href="#">Learn More</a>
将图像添加到简介中。
通过更新以下设置来设计简介：
- 背景颜色：#ffffff
- 文本对齐：居中
- 标题字体：音乐会一
- 标题文字颜色：#0a2d61
- 标题文字大小：50px
- 正文字体：音乐会一
- 正文文字大小：20px
- 车身线高：1.8em
- 链接字体样式：TT
- 链接文字颜色：#ff3d97
- 链接文字大小：20px
- 链接字母间距：5px
- 宽度：400px
- 填充：顶部 30 像素，底部 30 像素，左侧 30 像素，右侧 30 像素
- 圆角：10px
- 盒子阴影：见截图
- 框阴影模糊强度：80px
然后最后给blurb一个具有中心位置的固定位置。
- 位置：固定
- 位置：中间/中心
创建模拟顶部和底部部分
在当前部分下添加一个新的常规部分。
为该部分指定背景颜色。
- 背景颜色：#4DB9FF
然后给它一些高度，以便我们有足够的空间来滚动浏览带有浮动元素的部分。
- 高度：100vh
复制模拟部分并将副本移动到页面顶部，以便我们带有浮动元素的主要部分成为中间部分。
中间部分的最后润色
为了完成设计，我们将通过向该部分添加视差背景来添加另一层运动。 我们还需要隐藏溢出。 但主要问题是我们的固定元素仍然显示在顶部和底部部分的上方。 为了解决这个问题，我们需要给我们的部分一个 -1 Z 索引。
- 背景图片：插入图片
- 使用视差效果：是
- 视差效果：真视差
- 水平溢出：隐藏
- 垂直溢出：隐藏
- Z 指数：-1
注意：一旦您为该部分指定 -1 的 Z 索引，桌面视图模式下的可视化构建器可能无法正常工作。 因此，您可能需要部署线框视图模式以进一步编辑该部分。
静态元素的附加动画
使用多选选择四个静态图像，然后使用以下动画设置更新元素设置：
- 动画风格：幻灯片
- 动画方向：向上
- 动画持续时间：4000ms
- 动画开始不透明度：100%
这将添加图像在滚动时进入视图时的浮动效果。
最后结果
这是最终结果。
最后的想法
在 Divi 中浮动一个元素只需要点击几下就可以给它一个固定的位置，然后使用偏移量把它放在你希望它在浏览器中保持固定的确切位置。 然后您可以使用 Z 索引来确保固定元素仅在特定部分可见。 完成基本设置后，您可以通过添加额外的静态元素、视差背景和动画来改善滚动效果，使该部分栩栩如生。 我希望这能激励您在下一个 Divi 构建中获得一点创意。
如果您想将此部分提升到一个全新的水平，请查看我们现在内置于 Divi 的新滚动效果。
我期待在评论中收到您的来信。
干杯!