为了达到深度的错觉，网页设计师采用不同的视觉元素，并以不同的速度移动它们。例如，当用户滚动时，背景会缓慢移动，而其他元素保持不变或以更快的速度移动。

视差滚动在网站设计中是一种流行趋势，因为它可以使设计更令人兴奋或身临其境。然而，需要注意的是，视差效应范围内的过度运动可能会对前庭神经疾病患者造成伤害。运动和深度的幻觉会导致头晕或迷失方向。

如果你将这些网站作为自己的灵感来源，请遵循以下指南进行无障碍视差效果设计:

• 将视差效果的数量保持在最小
• 将移动效果限制在屏幕的小范围内
• 为用户提供关闭视差效果的选项

不要让你的效果分散用户对重要信息的注意力

易访问性注意事项:本文包括演示视差滚动效果的动图。

17个视差滚动网站的例子

我们收集了17个视差滚动的例子，可能会启发你在自己的工作中使用这种网页设计趋势。

1.路易卖家

路易·塞勒斯(Louie Sellers)作为一名前瞻性的用户体验设计师，他的众多天赋之一是他对交互的洞察力。在这里在线投资组合，他加入了许多很酷、吸引眼球的视觉效果。首先，有一支笔，当你从上到下书写时，它会打开盖子，然后重新组合起来。

然后在每个特色项目上都有视差效果。将鼠标悬停在一个项目上，可以用细节填充轮廓并移动图像，使其具有三维立体感。当前景图像在纯色背景色下移动时，会比保持静态时更突出。

2.网页设计和艺术史

不仅我们的网页设计和艺术史微型网站引导你了解艺术是如何演变的，并与现代网页设计有关，但它也是一个华丽的视觉体验，充满了辉煌的图形灵感排版和创造性的视差效果。这不仅是一个深入的艺术和网页设计的探索，但滚动触发动画的百科全书。从简单的滚动文本到更超现实的视觉效果，这篇文章展示了许多视差的伟大例子。

3.《七宝奇谋》

这是对《七宝奇谋》这部80年代的可爱电影以令人惊叹的视差开场，将你带入电影发生的俄勒冈州熟悉的岩石海岸线。这个视差的例子并不复杂。通过对前景和背景图像应用不同的速度，并将它们放大一点，这种3D效果会吸引你的注意力。

4.好的α

我们赞扬了创意设计机构好的α在过去，他们使用超大字体和大胆的颜色选择。不拘一格的色彩和经典字体与视差滚动设计技术为整体网站设计增添的动态体验搭配得很好。

5.船厂的社会

虽然很多餐厅都提供基本款餐厅的网站或者依靠社交媒体平台分享他们的菜单和商业信息，船厂的社会超出了最低限度。这家提供舒适食品和饮料的苏格兰供应商在他们的单页网站中包装了各种视觉效果，从英雄部分的标题文本开始，随着滚动而分开。

6.OnCorps人工智能

Heco伙伴将在本博客后面再次出现，因为他们非常擅长将视觉效果带入意想不到的和引人注目的方向。这是他们为数据分析公司设计的网页OnCorps，从一群分散的点开始，这些点聚集在一起形成了一条钟形曲线，很好地代表了它们对数据的处理。这个网站充分利用了视差滚动效果，布局充满了浮动形状和动画。

Heco Partners将在本博客的后面再次出现，因为他们非常擅长将视觉效果带入意想不到的和引人注目的方向。他们为数据分析公司OnCorps创建的这个网页设计，以一群分散的点开始，这些点聚集在一起形成一个钟形曲线，很好地代表了他们对数据的处理。这个网站充分利用了视差滚动效果，布局充满了浮动形状和动画。

7.Jomor设计

有一个聪明的布局，独特的微互动，和大量的智慧，这个投资组合从Jomor设计这表明在功能和个性之间找到正确的平衡是可能的。

从轻轻移动的文本，到触摸其视觉组件的众多视差效果，一切都汇聚在一起，为轻松的用户体验。这个网站的设计师乔纳森·莫林(Jonathan Morin)在幽默中加入了一些俏皮的话，比如“我78%的客户说我是个天才。另外22%的人说我是性感天才。”加上其他一些有趣的台词，这不仅仅是他作品的作品集，而是他是谁的代表。

8.视差模板

视差模板通过杰罗姆Bergamaschi从一开始就是色彩的爆炸。

这个模板包括一个色彩鲜艳的场景——绿色的田野，品红的悬崖边，橙色和粉红色的云——带有微妙的运动。在滚动时，场景底部的深色草似乎向上移动，将背景更改为黑色。这是流体视差滚动的一个很好的例子。

9.Weglot

Weglot扩展了Webflow的范围，让设计师无需懂另一种语言就能创建多语言网站。这让你有机会打破语言障碍，为世界各地的客户设计。有一些最好的视差效果讲故事和互动元素，如提示点击和打破语言障碍，这个网站真的让你滚动。

10.Avenir创意

Avenir创意使这个名单上的第二个条目从网页设计工作室Heco伙伴．当你开始在主页上滚动时，菜单中的文本会移动到45度角，并展开，以便为Avenir徽标留出空间，位于中间。

尤其令人印象深刻的是，他们如何将这种效果转化为移动设备上的类似效果。菜单中的文本会倾斜，但不会展开，当你向下滚动时，它仍然黏在页面顶部，而不是把大logo挤在菜单项之间。

11.点击Webflow Rebuild

创造者Andreea Encutescu对网上的互动很感兴趣Plink官方网站并决定在Webflow中重新创建它们。安德里亚为了教育目的重建了这个地方，甚至使项目可克隆给任何想尝试的人。

除了视差滚动效果，你还会看到3D插图和动画和自定义光标。安德烈亚还在YouTube上分享教程，供任何想了解他们如何重新创建这个网站的人使用。

12.野生机构

野生机构结合超大的文本和光滑的滚动触发动画一个恒星机构网站。有一个新用户以移动加法符号的形式触发视差，并结合了他们合作过的人的列表。有些最好的视差效果没有实际用途，但可以让设计脱颖而出。此外，大字体鼓励网站访问者继续滚动阅读更多内容，同时视差效果提供了有趣的用户体验。

13.Vectary

Vectary提供了一个创建AR和3D图像的平台。从卡通人物到逼真的产品演示，都可以通过他们的软件实现。欧宝体育在线首页有很多3D图形占据这种布局的。但是除此之外，他们还添加了如下所示的一些视差效果——进一步为这个设计增加了能量。

14.创造性的南

创造性的南这是一个在佐治亚州哥伦布市举办的设计会议，有令人印象深刻的演讲者名单和创意研讨会。背景插图的微妙变化让你觉得这个网站就像一本漫画书。该网站用有趣的视差效果捕捉了活动的创意精神，包括主页上的一个视差效果，让它看起来像一个正在飞行的热气球。

15.数字烤

如果你是一个Webflow设计师，还没有看过Aaron Grieve的酷而实用的Webflow元素库数字烤，你应该这样做。这种富有创造力和流畅的布局充满了视差的好处，给你另一个理由去看看他所提供的一切。

有一个很酷的形状阵列，和空间为您自己的内容，这是一个伟大的设计克隆免费的，随便玩玩。你甚至可以改变颜色和自定义它，但你想为自己的设计。

16.IX2

视差效果是2.0交互，那么为什么不通过结合交互(包括视差效果)来覆盖网页设计的历史呢?这段网络简史将带你通过交互2.0与互联网的发明90年代网页设计倒退、水平视差效果和滚动触发动画。

17.荷兰人的黄金

如果你正在寻找一个免费的可克隆的视差效果开始，这个项目来自Webflow自己的Nelson Abalos Jr提供坚实的基础。这个简单的项目用8位风格的视觉效果被设计来研究-克隆它并解构它来练习你的视差技能..

开始你自己的视差滚动设计

如果你还没有看过我们的Webflow大学，我们有一个关于交互和动画的完整课程这向你展示了如何在滚动上创建视差运动。无需编写HTML、CSS和JavaScript，您可以使用Webflow直观地开发视差效果，而无需编写代码。

你也可以看看这个视频，了解你在课程中会学到什么:

或者，如果你想现在就开始，从Webflow制作然后开始摆弄视差效果。