什么是视差效果？权威指南

一些网页设计趋势经受住了时间的考验。我们这里说的不是 Comic Sans 和基于 Flash 的动画——它们可以留在 21 世纪初。但视差效果如今仍然像 2011 年在网络上崭露头角时一样火爆。

在这篇文章中，我们将向您介绍什么是视差效果、使用它的好处，以及一些示例，以便您更好地了解如何应用它。

让我们开始吧！

什么是视差效果？

您是否曾经滚动浏览过一个感觉充满活力的页面？好像您在同时滚动浏览多个视图？这就是视差效果，当页面的不同元素以不同的速度移动时，就会发生这种情况——从而产生 3D 深度效果。

通常发生的情况是，背景图像将被固定在原地或缓慢移动，而页面上的图像和文本则正常滚动。您可以在这里看到它的实际效果

使用视差效果有哪些好处？

视差效果是丰富网站、展示产品和营造沉浸感的好方法。现在我们对什么是视差滚动效果有了一些了解，让我们来看看使用它的不同好处。

• 3D 深度： 通过分离图层并以不同的速度移动它们，您可以欺骗用户的大脑，使其感知到 3D 深度。
• 比例感： 在不同的层上拥有更多元素可以让您将它们彼此区分开来，并提供一种通常难以用 2D 静态图像传达的比例感。
• 定位用户焦点： 如果您想让用户的眼睛专注于特定元素，滚动效果可以让您看似对某个元素或其周围的所有元素进行动画处理，以保持焦点。
• 打破内容： B2B 网站经常使用视差效果来展示重要的公司产品。这些网站有很多信息，因此这是一个打破内容的好方法。
• 现代设计： 流畅的设计是所有行业公司都在遵循的现代 Web 和移动应用程序美学的一部分。充分利用滚动效果来保持您的设计潮流。

现在您已经了解了视差效果的好处，让我们通过一些示例来看看它们是如何实现的。

视差效果的示例

网站

直到 2011 年 HTML5 和 CSS 3 编码的引入，该技术才开始在网页设计师中流行起来。它们现在易于实现，并且使您的网站看起来现代而时尚。

我们展示了我们自己的垂直视差滚动效果示例，但这并不是网站的唯一用例。其他包括侧滚动、3D 图层视差、图层滚动等。您无需在苹果的 M2 MacBook Air 页面之外寻找即可看到滚动效果的实际应用。

这个来自 2011 年 Beercamp 的示例非常创造性地使用了视差效果，让人联想到星球大战的片尾字幕。虽然对于更多公司业务页面来说，这可能是一个压倒性的选择，但对于一个目标是令人难忘和诱人的活动来说，它效果很好。

移动应用

现在跨所有平台创建一致的设计变得容易多了，因此随着视差效果在网站上变得越来越流行，移动应用程序也紧随其后。图层和侧滚动效果以及垂直滚动效果在移动应用程序中也非常流行。但目标是一样的——为您的产品制作高质量的流畅动画和效果。

想自己尝试一下吗？如果您的手机上有 Apple 地图，请打开环顾四周街景视图，然后找到一条有一些特写物体的街道，例如公共汽车或面包车。当您移动时，您会看到附近的物体上有一种轻微的视差效果，这有助于使静止图像感觉更真实。

视频游戏

视差效果在视频游戏行业也流行了几十年。像超级马里奥兄弟和索尼克这样的游戏早在 80 年代和 90 年代就使用了它，许多现代游戏仍然充分利用这种效果来产生深度——看看茶杯头或奥日与鬼火意志的实际效果，你就会明白我们的意思。

在 2D 侧滚动游戏中，这种方法以不同的速度滚动背景和前景层，从而创建充满活力的动画场景。这是一个展示游戏低语世界中不同图层的示例。

将所有这些图层组合在一起，我们就得到了背景的完整图像。

将不同的滚动速度添加到这些不同的层中，您将获得强大的深度效果和流畅的动画。

Sketch 中的视差效果

我们选择在网站的多个页面上使用微妙的视差滚动效果——去看看我们的设计页面，看看它的实际效果。“这是一个自然的步骤，”我们的首席网页设计师 Augusto Lopes 解释道。“视差动画可以是低投入高回报。它们易于实现，并且如果使用得当，可以为您的网站带来很多好处——只是不要过度使用它们！”

我们的设计师和前端开发人员之一 Richárd Gazdik 对此表示赞同。“这种运动感觉很自然，并为原本静态的布局赋予了深度，”他说。

而且从开发的角度来看，这也很简单——正如 Richárd 解释的那样。“我们使用了一个非常小的 JS 框架，称为 Stimulus。它允许我们创建由 HTML 数据属性控制的小型 JavaScript 组件，”他继续说道。只需几个额外的 HTML 数据参数，团队就可以根据滚动速度控制水平和垂直速度。“因此，较大的物体和元素可以移动得更慢，而较小的物体和元素可以在虚拟空间中移动得更快，”Richárd 总结道。