滚动上的视差移动

视差效果创造了一种深度和透视的错觉。你可以通过以不同的速度移动视觉元素来实现这一点。使用视差效果创建动画可以达到很多目的，并使您的访问者能够以各种方式参与到您的网站的内容中，例如显示一些东西是如何工作的或突出显示一个产品的结构。欧宝体育在线首页或者它可以创造一种视觉效果，让你的网站访客浏览更长时间。Webflow的新交互2.0使得在你的网站中集成这样的动画变得轻而易举，你不需要写一行代码。

在这节课中:

1. 创建初始设置
2. 定义动画
3. 定义滚动动画
4. 预览动画
5. 添加更多的动画
6. 关闭设备的动画

专业提示-深度错觉

通过遵循深度感知原理模拟一个可靠的3D空间。这些包括元素的大小和位置以及各种阴影距离。甚至模糊效果也可以用来模拟景深。

创建初始设置

步骤1。添加一个部分

首先，让我们创建一个可以滚动进入和退出视图的部分。拖一个部分元素添加到画布上元素面板在左边找到的。把它放在折叠的下面，也放在其他部分的上面。

步骤2。设置部分

在选择该节时，在风格的面板在右边，添加一些顶部和底部填充．同时,设置溢出来隐藏的将内容保持在节的范围内。

步骤3。添加一个容器

拖一个容器元素的元素面板把它放到section里面。设置它高度到1200px和它位置来相对．这将使您能够完全在容器内定位图像。

步骤4。引入图像

对象中拖动图像资产面板成部分。设置适当的宽度，并对所有图像重复此过程。因为你想创建一个3D空间的幻觉，请确保在设置图像尺寸时考虑到这一点。

很高兴知道

控件中设置图像的宽度模态图像设置．要打开它，双击图像或单击图像标签旁边的齿轮图标。图像设置也位于元素设置面板在设计师的右边。你可以通过选择图像并按键盘上的D键来访问它们。

在图像设置中设置图像大小将在所有设备断点上将值应用于该图像。若要为不同设备上的图像设置不同的尺寸，请设置宽度通过风格的面板．

第5步。风格的图片

添加一个阴影每个图像。确保所有图像都有相同的阴影角．改变颜色而且不透明度的影子。设置它与图像边界的距离。添加一些模糊并设置阴影相对于图像边界的大小或分布。

步骤6。位置的图片

下一个任务是设置位置每个图像的绝对．然后通过使用UI更改任何位置值来定位每个图像，或者通过在每个输入中手动键入它们。指定一个z - index为图像。为那些你想要显示得更近的图像设置一个更高的z-index，并与背景中出现的任何图像重叠。

定义动画

理解动画可以帮助您识别触发器和动作为了达到你心中的目标，你需要定义它。

在这个动画中，当部分(一个元素)在视口中滚动时，您希望使图像动画化。所以,触发是一个元素触发的在视图中滚动时．和行动将是一个在滚动动画．

步骤7。设置触发

既然已经确定了交互的元素，就可以开始创建交互了。选择包含您创建的映像的部分。打开交互面板并创建一个元素触发的在视图中滚动时．

步骤8。配置触发器

选择播放滚动动画。如果您愿意，可以更改动画边界。这使您能够设置动画开始和结束的时间。默认情况下，当片段开始进入视口时动画开始，当它离开视口时动画结束。保持本教程的默认设置。

定义滚动动画

明确你的目标可以帮助你确定你需要设定的行动。在这一点上的目的是移动图像以不同的速度。当你滚动该部分时，前面的那些应该比后面的移动得更快。你会创建一个滚动操作的移动为每个图像。然后,设置位置的每个图像轴在动画的开始和结束。

第9步。创建滚动动画

在创建动画之前，让我们谈谈平滑。平滑，或阻尼，软化和平滑接近的速度在动画时间轴上的正确位置。您可以调整下平滑的值滚动动画．对于本教程，您可以将其设置为50%。

现在，创建一个新的滚动操作然后重新命名为“视差滚动效果”。

第10步。执行移动操作

选择z指数最高且看起来离你的视点最近的图像。添加一个滚动操作的移动在动画过程中改变图像的移动方式。

图像的两个关键帧或实例被添加到动画时间轴。一个设置为0%——动画的开始;一个在100% -动画结束。

步骤11。设置初始位置

选择第一个关键帧为0%。在移动转换设置，通过设置图像在上的位置来向下移动图像轴1000 px。这将是当section第一次滚动到视图时图像的位置。

步骤12。确定最终位置

选择动画时间轴中的第二个关键帧，并通过设置图像在轴-1000 px。这将是图像的位置，当部分滚动出视图。

步骤13。设置第二个动作

选择z指数最低的图像，并且看起来位于section的后面。添加一个滚动动作移动．两个新的关键帧被添加到这个新图像的动画时间轴中，一个为0%，另一个为100%。

定义初始位置

为这个新图像选择0%的关键帧。在移动转换设置，通过设置图像在控件上的位置将其向上移动轴-352 px。随着section滚动进入视图，这个图像将从这个位置开始移动。

设定最终位置

为相同的图像选择100%的关键帧，并设置在轴352 px。当你向下滚动页面时，这张图片会移动到这个位置。如果你改变了宽松设置为前面的操作，确保设置相同宽松在所有的行动。

步骤14。创建第三个动画

在前景中选择另一个图像。添加一个滚动动作移动．对于第一个关键帧，向下移动它。设置一个300px的值。对于第二个关键帧，将图像向上移动。现在设置一个值，比如-500px。这将使图像移动800px的距离，这比最近的图像慢，比最远的图像快。

预览动画

预览动画预览模式或通过切换驻留在画布上实时预览上。现在视差效果更加明显了，你已经在这个动画中创建了另一个层次的深度。调整位置或放松，以达到预期的结果。

添加更多的动画

在此滚动动画序列中，继续向您想要动画的每个图像添加滚动动作。确保你遵循这一逻辑模式去创造一个优秀的视差滚动动画:前面的元素(拥有较高z指数的元素)比后面的元素(拥有较低z指数的元素)移动得更快。

关闭设备的动画

您可以选择在移动设备上关闭此动画。来关闭动画时间轴X在“视差滚动效果”旁边。然后下其他设置,关闭设备你不希望这种互动被触发。

好知道-运动速度

当你设置图像在y轴上的位置时，你也设置了运动的速度。这是因为当你滚动该部分时，第一张图像从y坐标1000px移动到y坐标-1000px——距离为2000px。第二张图片从y坐标为-352px移动到y坐标为352px，移动的距离较短，为704px。因此，这部分似乎有三个层次或深度:

• 第一层——图像看起来更近，移动也更快
• 第二个层次——几乎所有其他的图像都以正常的速度移动
• 第三个层次——图像看起来更靠后，移动的速度要慢得多