滚动视差运动

视差的视觉效果给人一种深度和维度的印象。通过以不同的速度在屏幕上移动元素，可以实现这种效果。实现具有视差效果的动画有多种用途，通过展示机制或强调产品结构来增强用户参与度。它还可以创造引人入胜的视觉体验，鼓励访问者进一步探索您的网站。Webflow 的最新 Interactions 2.0 简化了此类动画在您网站上的集成，无需任何编码。

在这里，我们将介绍：

1. 建立初始设置
2. 定义动画
3. 设置滚动动画
4. 预览动画
5. 融入更多动画
6. 在特定设备上禁用动画

专业提示——深度错觉

要创建逼真的 3D 环境，请遵循深度感知原则。元素大小、位置、阴影距离甚至模糊效果等因素都有助于模拟深度和视野。

启动设置

步骤 1. 插入部分

首先添加一个 部分 元素从 元素面板 在左侧。将其放置在可见区域下方和其他部分上方。

步骤2.调整部分

选择部分并添加顶部和底部 填充 在样式面板中。此外，设置 溢出 到 隐 将内容包含在部分边界内。

步骤 3. 插入容器

拖动 容器 元素来自 元素面板 到该部分。将其设置为 高度 设置为 1200px，并使其 位置 相对的。此设置允许在容器内精确定位图像。

步骤4.导入图像

从中选择图像 资源面板 并将它们放入部分中。调整图像尺寸以有效地创建 3D 空间感。

附加信息

您可以在 图像设置模式。双击图片或点击图片标签旁边的齿轮图标即可访问。或者，使用 元素设置面板 在右侧设计处选择图像并按下键盘上的 D 键。

在图片设置中调整图片尺寸会将更改级联到各个设备断点。如需在特定设备上使用特定尺寸，请调整 宽度 通过 样式面板.

步骤5.增强图像样式

应用 阴影 确保阴影一致 角度 在所有图像上。调整 颜色, 不透明度， 距离， 模糊以及阴影的大小/扩散来创造视觉深度。

步骤 6. 定位图像

设置 位置 每幅图像 绝对. 通过 UI 或手动输入操作位置值来调整图像定位。定义 z 索引 控制分层——z 索引值较高的图像看起来更近，并与背景重叠。

动画定义

理解动画对于识别 事件和响应 达到期望结果所需的。 

在此动画中，图像旨在随着部分滚动到视图中而动画化。因此， 事件 是一个 元素触发器 的 在视图中滚动时，引发 滚动动画 作为 回复.

步骤 7. 定义事件

通过选择包含图像的部分开始创建交互。利用 交互面板 设置 元素触发器 的 在视图中滚动时.

步骤 8. 事件配置

选择 启动滚动动画。如有必要，请调整动画边界以控制动画的开始和结束时间。默认情况下，动画在部分进入视口时开始，在部分退出视口时结束。在本教程中，请坚持使用默认设置。

描述滚动动画

明确目标有助于确定需要完成的任务。此时，目标是改变图像的速度。在滚动浏览片段时，位于最前面的图像看起来应该比背景中的图像运动速度更快。因此，你将设计一个 滚动动作 和 转移 对于每幅图像。随后，确定 地点 每幅图像的 y 轴 在动画的开始和结束时。

步骤 9. 创建滚动动画

在开始动画之前，让我们先讨论一下平滑的概念。平滑或阻尼可缓和和细化即将发生的速度，使其朝向动画时间线上的准确位置。平滑值可在 滚动动画。对于本指南，您可以将其保留在 50%。

现在生成一个新的 滚动动作

步骤 10. 执行移位操作

选择 z-index 最大且距离您的视角最近的图像。引入 滚动动作 的 转移 修改动画过程中图像的移动方式。

动画时间轴包含两个关键帧或图像事件。一个配置在 0%（动画的开始），另一个配置在 100%（动画的结束）。

步骤 11. 建立初始位置

选择第一个关键帧 0%。在 转变转换设置，通过指定图像在 Y 轴 为 1000px。这将表示片段最初滚动到视图中时图像的位置。

第 12 步：确定最终位置

在动画时间轴中标记第二个关键帧，并通过在 y 轴 到 -1000px。这将表示片段滚动出视图时图像的位置。

步骤 13. 建立次要行动

选择 z 索引最低且位于片段最靠后的图像。集成滚动操作 转移。此新图像的动画时间线上附加了两个新的关键帧，一个位于 0%，另一个位于 100%。

确定主要地位

为该新图像选择 0% 处的关键帧。在 转变转换设置，通过指定其在 Y 轴 为 -352px。当片段滚动到视图中时，该图像将从此位置开始移动。

指定最终位置

选择对应图片的100%处的关键帧，并调整其在 Y 轴 到 352px。随着页面向下移动，此图像将下降到此位置。如果您修改了先前操作的缓动首选项，请确保应用相同的 宽松 一切行动。

步骤 14. 制作第三个动画

选择前景中的其他图像。包括滚动操作 转移。对于第一个关键帧，将其降低。指定 300px 的值。对于第二个关键帧，提升图像。现在设置一个值，例如 -500px。这将导致图像遍历 800px 的跨度，这比最近的图像慢，但比最远的图像快。

动画的初步看法

预见动画 预览模式 设计师或通过切换 实时预览 开启。目前，视差效果更加明显，并且您已经开发出似乎在该动画中增加了深度的附加层。修改位置或缓和以实现预期结果。

融入更多动画

在整个滚动动画序列中，继续将滚动操作附加到您想要动画的每个图像。确保您遵循此系统模式来制定连贯的视差滚动动画：前景中的元素（具有较高 z 索引的元素）似乎比背景中的元素（具有较低 z 索引的元素）移动得更快。

禁用小工具的动画

您可以选择在移动设备上停用此动画。选择 X 旁边的“视差滚动效果”。然后在 其他设置, 停用设备 您不希望触发此交互。

功能情报 — 运动速度

在确定图像在 y 轴上的位置时，您同时也在确定运动速度。这是因为在浏览该片段时，初始图像从 y 位置 1000px 移动到 y 位置 -1000px - 距离为 2000px。后续图像在从 y 位置 -352px 过渡到 y 位置 352px 时覆盖的距离较短，为 704px。该片段中似乎有三个平面或深度层：

• 第一层——图像看起来更近，移动速度更快
• 第二层——几乎所有其他图像似乎都以标准速度移动
• 第三层——图像看起来更远，移动速度也明显较慢