31个最好的视差网站实例，2021年给你灵感

传统思维网页设计领域坚持认为你的网站设计应该尽量减少用户滚动的需要，并保留最重要的信息。在褶皱．"

然而，很多事情发生了近年来发生了变化如果你仔细想想，我们生活在一个滚动的文化中。

网络用户已经习惯于向下滚动页面来获取绝对的最后一条信息。谷歌也喜欢有较长的会话持续时间的网站，实现这一点的方法之一是通过创造独特的体验来吸引访问者滚动。

结合视差滚动也可以帮助你完成各种目标，如:

• 让你的访客沉浸在独特的体验中
• 对cta或表格采取行动
• 为没有生命的图像提供自然的运动

当执行准确时，这种技术的应用应该是普通用户不会分心或注意到的。它应该有助于你想要你的网站实现的任何更大的目标，例如产生更多高质量的入站线索．

但在我们深入讨论之前，让我们后退一步，回顾一下什么是视差滚动。

什么是视差滚动?

视差滚动是在网页设计中使用的一种特殊的滚动技术，在整个网页中背景图像的移动速度比前景图像慢，在二维网站上创造一种深度错觉。

这是目前网页设计中最常用的设计技巧之一，但你可能还没有意识到你已经体验过了。

视差滚动的例子Squarespace

这是一个简单的动作，你已经习惯了，它帮助许多网站感觉动态和互动性。

如果你选择使用它，思考视差如何影响移动体验是很重要的。为了提高网站速度，同时又不过分侵犯手机的可用性，通常建议减少视差滚动或完全删除它。

记住，要考虑到您可能首先要使用它的所有实例，以及需要如何针对跨多个设备的用户进行调整。

如何使用视差滚动?

同样需要注意的是，像视差这样的设计美学应该是“非常棒的”，而不是你网站的核心组件。你的网站需要首先考虑到你的用户，并专门设计来推动人们通过顶部，中间和底部的漏斗区域的网站。功能先于形式，形式只能增强功能。

你的网站首先应该是一个有价值的销售工具，帮助人们去他们想去的地方，并回答他们的问题。一旦你建立了这个基础，你就可以开始寻找互动的方式来帮助实现这个目标，而不是先设计后策略。

31个网站的视差是正确的

因为视差滚动可以以多种方式使用，所以有很多例子可以启发你。

使用视差滚动很容易让人觉得移动太多，但有些网站执行得很好。

下面的例子就是这么做的，以一种有意义并增加价值的方式结合了视差滚动。有些人将这一技术发挥到了极致，而有些人则利用它来增加用户体验，而没有任何潜在的压倒性效果。

1.Anemoi海洋

当你向下滚动他们的主页时，Anemoi Marine动画了他们的旋翼帆，创造了一个了解产品的效率、尺寸选择、可操作性、维护等的叙事体验。

这有助于Aneimoi的核心客户更好地了解这种水平的东西是如何运作和工作的，这通常是拍摄真实照片的挑战。

2.宿舍

Dorm是一个教育平台，它在使用视差放大和缩小某些图像方面做得很好，这有助于传递信息。当你滚动时，月亮图像的初始动画变得越来越近，让它看起来就像你根本不是在浏览一个网站。它创造了一种进入宿舍“宇宙”的更超现实的体验。

除此之外，他们的视差效果也很好地展示了他们的平台提供的不同教师或主题的数量，让用户觉得他们有很多选择。

3.标记

MarkUp是另一家使用视差滚动软件不同部分的公司。这很有效，因为它引导用户的视线到您不想错过的重要元素。

当图像在右侧滚动时，左边的文本会随着新图像进入视图而淡入淡出。在这条短信下面，他们确保留下了他们的行动呼吁来注册。使用这种布局，而不是重复的左右/左右图像和文本布局，使体验在视觉上更有趣。

4.环保基金(影响报告)(EDF)

EDF在他们的影响报告中大量使用视差滚动，滚动各种与报告不同部分相关的生动图像和文本。这使得消化密集的信息变得更有趣，也更容易。

这种体验是通过访问的子页面进行的。这些页面中的大多数都有文本段落，当你滚动浏览它们时，文本段落会进入或退出你的视野，让你只关注你需要关注的内容。

5.单鞋

对于uniis，我必须强调他们的可持续发展页面，其中描述了环保意识的重要性与他们的鞋类产品。

页面设置类似于时间轴，每个可持续性租户都包含在其部分，然而，当你向下滚动页面时，一条线被绘制到下一个。当你滚动时，每个部分中的图像对也会移动并相互重叠。

6.构建未来

Ativar的会议Building the Future，利用视差更动态地显示会议信息。

一个创造性的例子就是他们的英雄部分。在这里，他们垂直显示他们的徽标，并将有关会议的教育任务的信息放在它的两边，当你滚动它。总的来说，这是一种更吸引人的传达文本内容的方式。这种用法使你想要来浏览那些通常非常通用的信息。

7.库珀帕金斯

工程设计实践公司Cooper Perkins展示了一个很好的例子，说明了如何将简单性和视差滚动结合起来。

在一些页面上，他们使用了大型的英雄图像，当你开始滚动时，它会“显示”下面的其他内容。

在其他情况下，他们会在特定的文本区域使用视差，比如团队页面上的统计数据。当你滚动时，它们的速度会增加，但不会以压倒性的方式吸引注意力。

8.AlliancePlus

AlliancePlus是一个很好的例子，它展示了非库存照片如何与视差滚动相结合，以某种方式创造一种身临大境的体验。在这个例子中，它描绘了他们的员工和客户。

它使用视差滚动来滚动页面的特定图像，最终停止在更低的部分。它让用户想要继续关注他们，看看他们会在哪里结束。

他们在工作页面的“会见员工”部分使用视差滚动的方式，将用户的注意力吸引到他们的员工的积极肯定，显示出他们是多么喜欢在那里工作。

9.阿波罗

Apollo增强了他们网站的动画效果，将它们与视差结合在一起，给用户一种控制感。

当你滚动时，每个部分的装饰元素移动得更快，给网站一种分层的深度感。这些元素也是唯一有视差的东西，所以这是一个非常具体的品牌在网站上。

10.WOTA

通过在整个网站上整合类似水的属性，WOTA体现了他们公司的宗旨。最有趣的用例是在他们的产品部分，滚动将扭曲图像，使它们看起来像在水下游泳。

像这样的视差效果直接连接到你的品牌，使效果超级有意;只是觉得应该用一下。

11.Kontainer

Kontainer以一种更微妙的方式使用视差滚动，将人们的注意力引导到其软件的图像上。你会注意到在对半部分的图像将缓慢上升，比你的滚动速度快。

这有助于使页面中一半图像，一半文本的布局更具互动性，并吸引用户的眼球。

12.日立

和Kontainer一样，日立也使用了细微的视差来吸引人们对重要的排版和页面上较小的标题的注意。

在这个用例中，大部分视差都是在与按钮或动作相关联的部分中完成的。所以当网站的某个部分有那个动画时，它就会假设这个部分是可以点击的。这有助于帮助用户更深入地了解网站的特定区域。

13.影响码

像其他例子一样，Boynton Yards使用的视差给图像带来了一种深度感。当你滚动过去时，它们周围的部分区域会显示图像的一部分。

在特定的部分，当你向上或向下滚动页面时，有缓慢滚动的文本，上面的图像地址会增加或减少速度和方向。

14.TEDxBethesda

TEDxBethesda 2019的登陆页面的主题是成为一个有远见的人，想象那些超越常规或“在那里”的事情。

为了塑造这个主题，他们将内容和其他图片放置在主页顶部的点状图案上，当你滚动时，它总是在背景中出现。

当你在屏幕上移动鼠标时，甚至英雄部分的logo和大的“X”图像和文本也会发生轻微的移动。

15.Canatal

Canatal的主页被划分为若干部分，以帮助解释该公司与众不同的一些关键组成部分。

当你在网站上滚动时，与之相关的部分和图像也会随着你的滚动进入你的视野。这些部分的庄严也让人觉得卡纳塔尔想要庆祝他们强调的三个区域。

16.罗兰百悦

在Laurent-Perrier的网站上，几乎每一个图像和文本区域都有一个非常轻微的视差效果。

由于这个网站的复杂本质，我发现它对视差滚动的巧妙使用让人想起当你拿在手里的酒杯中葡萄酒的轻微移动。

17.La短语5

La Phrase 5的网站主要由较小的、包含更多的几何形状和圆圈组成，其中有文本和图像。

每个部分以不同的速度移动，在滚动过程中相互重叠。这种风格让人联想到印刷设计中更常见的风格，并且很好地分割了网站的各个方面。

18.Scrollino®

Scrollino®被描述为一种“阅读连续可打印的编辑或书籍内容的创新设备。”

虽然有一些视频展示了如何使用该产品，Scrollino®使用视差滚动动画的产品图像。这样用户就不会被迫观看产品视频。相反，一旦他们滚动过图片所在的区域，他们就会受到教育，并对互动感到高兴。

19.信

Letter的滚动视频动画让我大吃一惊，当你滚动到英雄下方的部分时，就会出现这种动画。当你滚动屏幕时，镶着钻石的大信用卡就会弹出，这就给用户带来了一种敬畏感。

同样是这张镶有钻石的信用卡在“认真对待安全”部分返回，当你滚动浏览部分时，它会在中心旋转。这些动画增加了卡片的奢华感，这一点尤其重要，因为它的广告面向的是“高净值人士”。

20.麦当劳在印度

麦当劳印度在其主页的每个部分都使用了视差，通常是为了突出主要的文本区域和功能。

我也喜欢他们在许多部分下面加入芝麻图案的做法，这在这些部分中引用了三明治的面包。

21.CodeQ

CodeQ和其他公司一样，非常喜欢使用视差滚动来定位图像，就像它们漂浮在静态内容的旁边一样。

他们还使用视差在他们的作品集页面上创建一种深度感，通过显示作品集图像上方和下方的彩色层，当你滚动时分散得更远。这也会引导你的眼睛去阅读与每个项目相关的文本，其中包括与图像重叠的标题和位于每个部分最右边的描述。

22.癌症研究基金会

癌症研究基金会(Cancer Research Foundation)在他们的组织中应用了一个非常有活力和丰富多彩的品牌，这与他们希望科学家探索的“大胆”疗法不谋之合。

为了融入网站的科学主题，他们的设计包含了研究笔记和分子化合物的小草图，当你滚动浏览时，它们的内容会重叠。这些元素将用户进一步融入他们想要传达的故事中。

23.Konstantopoulos

对于一家橄榄油公司来说，展示你用来制作产品的橄榄非常重要，而这正是康斯坦托普洛斯所做的。他们在网站的页面上放置了橄榄、橄榄叶和橄榄核的小图像。

我最喜欢的用例在生产中历史页面．该页面提供了一个交互式滚动时间轴，描述了该公司的历史，由于视差，当你滚动日期到日期时，那些橄榄树元素会浮在上面。

24.UBank

UBank在主页上使用了视差滚动，展示了应用程序的各种区域和功能。

当您滚动每个部分和每个部分中包含的各个子部分时，应用程序的这些图像会淡入淡出。当你进入每个部分时，一条小线会滚动，这有助于指示哪个文本区域与你在页面右侧看到的图像相关联。

这种交互性充当了应用程序提供的所有内容的高级游览，这有助于用户在使用之前更好地保留关于应用程序的信息。

25.史密斯学院

史密斯研究所是一个专家团队，为数学和工程挑战带来见解和解决方案。在他们的“关于”页面上，他们使用视差在时间轴上的年份来突出他们在一段时间内所达到的里程碑。

缓慢的滚动时间和背景中的图标为他们取得最大成就的时间点带来了更多的背景信息。他们还在时间轴上画了一条竖线，连接到他们指出的每一年，让用户知道他们需要继续滚动。

26.NeaMedia

nemedia是一家制作3D雕塑和小雕像的公司，所以对他们来说，只有近距离展示他们的作品和细节才有意义。

与此同时，nemedia在他们所有的图像上使用视差来强调和关注他们所做的不可思议的工作。

27.上

Upper是一个简单的生产力应用程序，可以下载到你的移动设备上，以帮助管理你的工作，并激励你跟上它。

在他们的功能页面的中间，Upper使用视差来显示各种颜色的显示选项，你可以在应用程序中使用不同的UI变体的浮动示例在后台。这让用户在下载之前就能更好地理解不同的选项和可能的体验。

28.NooFlow

NooFlow是一家保健品公司，它坚信他们的产品将会是提高你的表现的解决方案，并且知道它的网站需要能够代表这一点。

为了实现这一点，NooFlow根据你访问的页面对产品、成分或药片的图片进行视差处理。同样，这也是突出产品和吸引用户眼球的绝妙方法。

29.先锋布拉格

布拉格先锋(Vanguard Prague)是一家来自捷克共和国的室内设计公司，它帮助促进了整个布拉格地区阁楼生活的豪华和前瞻性设计。

他们使用视差滚动突出花岗岩纹理、文本和图像，允许用户描绘出Vanguard可能提供的产品类型，如果他们选择雇用他们。

30.Packwire

Packwire是一家定制包装公司，有各种各样的盒子大小，您可以使用它来为您的需求创造完美的选择。

主页上的英雄区域有几个选项。有了视差，这些盒子会有动画效果，并移动到一个更分散的位置，以显示盒子大小的名称和功能。它们也都有一个亮黄色的“定制”按钮，让你开始选择哪个盒子最适合你的运输需求。

31.WebFlow

你有没有想过回到过去，被提醒(或了解)网络过去是什么样子，以及它是如何发展的?看看CMS WebFlow的网站就知道了。

它们带你踏上了一段浏览网页历史的旅程，当你接近页面底部时，你可以滚动浏览各种元素，并过渡到现代设计。

关键的外卖

视差滚动当然为用户体验提供了各种优势，甚至可能有助于更好地获得一些网站营销指标，如果执行得当——但这种技术并不适用于所有人。

根据你的目标用户，你的用户可能会觉得这种效果太分散注意力甚至令人讨厌，所以在进行大规模UI更改之前，确保在较小的范围内测试这种效果并获得反馈。最重要的是，确保它有助于你的信息传递和转换目标，而不是伤害它们。