如何使用 Divi 的滚动效果创建分离图像过渡

Divi 的滚动效果使我们能够创建出色的过渡动画，以引人注目的设计让访客惊叹不已。 尤其是图像，可以以令人惊讶的方式展示这些滚动效果的力量。 在本教程中，我们将逐步解释如何使用 Divi 的滚动效果创建分离的图像过渡。 此效果最初出现在演示页面上。 这种效果涉及使用像 Photoshop 这样的照片编辑器预先对图像进行切片（这很容易做到）。 图像切片后，我们需要做的就是将它们添加到 Divi 并使用内置的滚动效果来实现魔术。

让我们开始吧。

抢先看

这是今天的设计一览。

您还可以在标题为“锻炼不必无聊”的演示页面上查看设计的原始现场演示。

免费下载 Breakaway Image Transition Divi 布局

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

下载文件

免费下载

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

下载

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

要将布局导入您的页面，只需提取 zip 文件并将 JSON 文件拖到 Divi Builder 中。

让我们进入教程，好吗？

你需要什么开始

首先，您需要执行以下操作：

1. 如果您还没有安装并激活 Divi 主题。
2. 在WordPress中新建一个页面，在前端使用Divi Builder编辑页面（visual builder）。
3. 选择“从头开始构建”选项。

之后，您将有一个空白画布开始在 Divi 中进行设计。

除了上面的 Divi 设置之外，您还需要：

• 两张图片（至少 1080 像素 x 540 像素）
• 像Photoshop这样的照片编辑软件在将图像添加到Divi之前对图像进行切片。

第 1 部分：在 Photoshop 中切片图像

在我们开始在 Divi 中创建我们的设计之前，我们需要对将用于分离过渡滚动效果的两个图像进行切片。 两个图像都需要裁剪，以便它们正好是 1080 像素 x 540 像素。 之后，它们需要被切成 8 个相等的部分（4 个，2 个向下）。 准备好后，我们可以将它们保存到我们的计算机并将图像切片上传到我们的网站。 让我们从第一张图片开始。

图片#1

裁剪图像

我们需要做的第一件事是裁剪图像，使其精确尺寸为 1080 像素 x 540 像素。 您可以使用任何图像编辑软件来执行此操作。 在 Photoshop 中，您可以使用裁剪工具。

切片图像

接下来，单击以使用切片工具并选择整个图像。 右键单击切片/图像并选择分割切片选项。

在分割切片选项框中，更新以下内容：

横向分为：

• 2 片，均匀间隔
• 每切片 270 像素

纵向分为：

• 4 片，均匀间隔
• 每切片 270 像素

然后单击确定。

保存图像切片

现在我们将图像切成 8 个相等的块，每个块的大小为 270 像素 x 270 像素。

要保存图像切片，请导航到文件 > 导出 > 保存为 Web。

然后选择文件格式并单击保存。

在弹出框中，确保更新以下内容：

• 另存为：[输入图像名称]
• 格式：仅图像
• 设置：默认设置
• 切片：所有切片

然后点击保存。

现在您所有的图像切片都将保存到计算机，准备上传到 Divi。

图片#2

要创建此分离图像过渡滚动效果所需的第二张图像，我们应该遵循与创建第一张图像相同的过程（裁剪、切片和保存）。

旋转图像切片

但是，由于旋转滚动效果的工作方式，构成第二个图像的每个图像切片都需要向左或向右旋转 90 度。

要旋转图像，您可以使用 Photoshop 或操作系统中的内置图像编辑软件（您甚至可以使用 WordPress 媒体库在将图像上传到您的网站后对其进行编辑和旋转。）。

以下是切片图像时如何在其原始位置内旋转图像的指南。

这是原始图像。

以下是在将图像切片上传到您的网站之前应如何旋转它们。

这是必要的，以便我们最终可以获得以下滚动效果。

现在两个图像都被裁剪、切片、保存和旋转，您可以将它们添加到您的 Divi 站点。 您总共应该有 16 张图片（图片 1 中的 8 张，图片 2 中的 8 张）。

第 2 部分：在 Divi 中创建分离图像过渡滚动效果

一旦图像切片准备就绪，我们就可以在 Divi 中开始设计过程。 这是如何做到的。

添加第 1 行

首先，创建一个四列行。

行设置

打开行设置并更新以下内容：

• 天沟宽度：1
• 最大宽度：1080 像素（桌面），540 像素（平板电脑和手机）
• 填充：0px 顶部，0px 底部
• 水平溢出：可见
• 垂直溢出：可见

更新部分填充

由于我们要将第二行绝对定位在第一行的顶部，因此我们需要去掉该部分的顶部（和底部）填充，以便它不会偏离第二行的位置。 打开部分设置并更新以下内容：

• 填充：顶部 0px，左侧 0px

添加图像

在第一行，我们将添加构成第一张图像的 8 个图像/切片中的每一个。 图像应完全按照它们在 Photoshop 中切片的方式（4 横 2 下）定位在列中。

这是每个标有数字的图像的说明。 这是将所有图像添加到行后的样子。

图片#1

将第一个图像模块添加到第 1 列。

然后将第一个图像切片上传到模块。

滚动效果

在高级选项卡下，为图像添加以下滚动效果。

• 启用淡入淡出：是
• 起始不透明度：100%（在 20% 视口处）
• 中等不透明度：100%（在 20% 视口处）
• 结束不透明度：0%（在 50% 视口处）

单击比例选项卡并更新以下内容：

• 启用向上和向下扩展：是
• 起始比例：100%（在 20% 视口处）
• 中比例：70%（在 32% – 48% 视口下）
• 结束比例：100%（在 60% 视口处）

单击旋转选项卡并更新以下内容：

• 启用旋转：是
• 开始旋转：0 度（在 0% 视口处）
• 中间旋转：0 度（在 20% 视口处）
• 结束旋转：-90 度（在 60% 视口处）

向下滚动页面时，滚动效果将如下所示。

图片#2

要创建图像 #2，请复制图像 #1 并将副本放在第 2 列中。

使用图像 #2 更新重复的图像模块。

更新滚动效果

我们将保留图像 #1 中的大部分相同滚动效果。 我们唯一需要改变的是旋转。 转到高级选项卡并将结束旋转更改为 90 度（而不是 -90 度），使其向相反方向旋转。

• 结束旋转：90 度

图片#3

要创建图像 #3，请将图像 #1 复制并粘贴到第 3 列，然后将图像更改为图像 #3。

图片#4

要创建图像 #4，请将图像 #2 复制并粘贴到第 4 列并将图像更新为图像 #4。

图像#5

要创建图像 #5，请复制图像 #1，以便副本位于第 1 列的正下方。

将图像更新为图像 #5。 然后更新淡入淡出滚动效果如下：

• 起始不透明度：100%（在 0% 视口处）
• 中间不透明度：100%（在 0% 视口处）
• 结束不透明度：0%（在 40% 视口处）

然后更新 Scaling Up 和 Down 滚动效果如下：

• 起始比例：100%（在 0% 视口处）
• 中比例：70%（12% – 28% 视口）
• 结束比例：100%（在 40% 视口处）

最后，更新旋转滚动效果如下：

• 开始旋转：0 度（在 0% 视口处）
• 中间旋转：0 度（在 0% 视口处）
• 结束旋转：90 度（在 40% 视口处）

图片#6

要创建图像 #6，复制图像 #5 并将其移动到第 2 列（在图像 #2 下）。

使用图像 #5 更新图像模块。 然后将旋转滚动效果调整为相反方向（-90度）如下：

• 结束旋转：-90 度

图片#7

要创建图像 #7，复制图像 #5 并将其移动到第 3 列中的图像 #3 下。然后使用图像 #7 更新复制图像模块。

图片#8

要创建图像 #8，复制图像 #6 并将其移动到第 4 列中的图像 #4 下。然后使用图像 #8 更新复制的图像模块。

现在所有的图像切片都已添加到具有分离滚动效果的第 1 行。

这是到目前为止的结果。

添加第 2 行

第二行图像不会花费太多时间来设计。 我们需要做的就是复制第 1 行，用正确的图像更新所有图像，然后给它一个绝对位置。

继续并复制第 1 行。

更新第 2 行图像

记住我们为图像 #2 创建的旋转图像。 现在，我们需要做的就是将它们中的每一个上传到第 2 行中的正确图像模块位置。

更新图像滚动效果

一旦新的旋转图像就位，我们需要从第 2 行中的所有图像中去除淡入淡出滚动效果。

这样做，部署线框视图模式并使用多选来选择第 2 行中的所有 8 个图像。 然后打开所选图像之一的设置以部署元素设置。 在淡入淡出滚动效果选项下，更新以下内容：

• 启用淡入淡出：否

位置行 #2

我们的最后一步是将第 2 行直接放在第 1 行的后面。 一个简单的方法是给出行和绝对位置。 打开第 2 行的设置并更新以下内容：

• 位置：绝对
• 地点：顶部中心

最后结果

要查看结果，您可能需要为您的部分提供大量的顶部和底部边距，或者在设计上方和下方创建其他部分。 这将为您提供正确查看滚动效果所需的空间。

让我们看看最终的结果。

这是在手机上。

最后的想法

这种分离的图像转换本身就是一个令人印象深刻的设计，但您可以轻松地使用它向访问者传达转换类型的信息（例如之前和之后）。 而且您也不必满足于这种设计。 随意尝试不同的滚动效果，以创建更惊人的图像过渡。 有什么想法吗？

我期待在评论中收到您的来信。

干杯!