进入Mockplus团队后，我开始进入设计阶段。在工作过程中，还将与用户讨论一些设计项目问题。在与用户沟通的过程中，我发现用户的问题不仅包括各种Mockplus使用问题，而且还多次，在解决用户问题的同时，我也可以感受到他们缺乏设计思路。例如，对于数十个用户来说，Web项目的设计可能是相同的。

如何使您的网站设计与众不同？你可能需要更多的灵感和技巧。

使网站看起来很酷，丰富和有吸引力。您可以添加各种设计效果和技巧。视差滚动效果是最佳选择之一。在这里，Mockplus团队精心组织了20多个视差滚动网站设计。我希望在阅读这些好的设计之后，您还可以使用Mockplus制作相同的创意网页视差原型。

首先，什么是视差滚动设计？

视差滚动，Parallax Scrolling的英语，意味着多层背景以不同的速度移动以形成三维运动效果，从而带来非常好的视觉体验。网页设计中最常见的视差效果之一是用户可以在向下滚动页面或跨页面时创建3D滚动效果。如果视差设计做得好，它将极大地增强用户体验并吸引更多用户。

接下来，让我们来看看这些优秀的视差滚动网站设计。

1. Femme Fatale

Femme Fatale是一家致力于文化，奢侈，社论和艺术的创意工作室。它包含一个精彩的动画互动页面，唤起访客的心情。向下滚动页面时，页面背景将与页面滚动条切换。每页的背景颜色不同。当页面滚动时，页面文本将以不同的速度加载，以及其他元素，例如页面图像。形成视差滚动。

2.每一个最后一滴

Every Last Drop是一个展示生命用水的网站，旨在引起人们对地球水资源的关注并节约用水。设计者以相等的比例划分页面进度条。当您向下滚动页面时，您将看到在各种生活场景中如何消耗水并显示用水百分比。使用动画视差效果切换每个场景。 3D视差滚动效果也已添加到其“Universe”页面。

3.啤酒营

Beer Camp的整个网页分为5个页面层，当你滚动时，会有一种“镜子到底”的感觉。而且它的视差滚动效果非常不同，既不是水平也不是垂直，而是平滑的缩放效果。滚动页面时，每个图层可以连续放大到页面的前面。添加明亮的配色方案和广泛的布局，营造出令人惊叹的空间感。

4.保时捷革命

保时捷Volution充分体现了设计师对汽车的热爱以及对保时捷品牌的浓厚兴趣。整个页面设计以视差滚动照片的形式展示了保时捷的发展，优雅的背景音乐和令人惊叹的配色方案。屏幕左侧有一个时间线，当您向下滚动时，您可以清楚地看到保时捷的演变。

5.发言

Spokes Eclectic Pedicab Rides是一个为停车和公共交通提供即时解决方案的网站。该网站呼吁绿色生活和经济生活，对以自行车为中心的社区文化具有重要意义。该网站是漫画风格，页面元素在页面滚动时在不同阶段加载，具有丰富的视差效果。顶部导航栏的设计也是一个亮点。

6.热点

热点和上面的视差示例不同，它是水平视差滚动。页面从左向右前进，具有平滑的3D视差效果，页面元素和纯黑色背景很好地匹配。该网站也是移动优先设计的一个很好的例子。页面底部有一个可点击的CTA，便于访问。

7. Hobolobo

这也是一个水平视差滚动效果网站，但它的不同之处在于它更适合于触摸设备。但是当您滑动触摸板时，页面会从左向右移动，以讲故事的方式呈现故事。页面顶部栏上有一个页面列表，随页面一起滑动以显示您当前的位置。这个网站完全是漫画，最令人惊奇的是它的3D视差效果。

8. Firewatch

Firewatch是荒野探险的设计地点。该网站有六个移动图层，显示页面的丰富性和深度。它的视差效果仅用于第一页。当页面滚动时，元素向上推，创建一个3D效果，让我想起《狮子王》中的经典镜头。其他页面是平滑的静态页面，允许用户读取大量的文本信息。

9. Nizo App

这绝对是我最喜欢的视差网站之一。当滚动鼠标时，所有UI元素以特定的不同节奏聚集在页面的中心以形成印刷整体。当鼠标向后滚动时，所有元素都与中心分离，图像生动活泼。整个页面干净简洁，背景纯实，文字粗体。

10.标致

这是一个很酷的网站，滚动鼠标时，你会输入一个精彩的故事。它以视差滚动方式自动播放漫画故事，并根据故事情节水平或垂直显示视差效果。

11. Bunkai

这是一个日本网站。向下滚动时，有一个可爱的卡通女孩在页面上移动，页面根据女孩的位置加载不同的信息。视差滚动效果在最后一个屏幕结束，因此您可以阅读所有信息而不会头晕。

12.梅兰妮·戴维德

Melanie Daveid将为您带来数字世界的精彩体验。精致的细节和品牌指南使其视觉上令人惊叹。滚动时，页面分为两部分，左页面仍然是，右侧继续滚动，形成视差。

13.船

这也是一种讲故事的方式来展示网站的视差设计。这艘船有六章。每章都展示了视差幻灯片中的不同场景。移动视差层还有助于营造深度感。我个人喜欢这个草图样式页面元素。

14. Dave Gamache

视差滚动网站使用纯黑色背景。向下滚动鼠标时，界面右侧有一个UI元素。此外，当您滚动页面时，有一个手机会有节奏地旋转。

15.组装

Assemble是一个免费的在线投资组合网站，您可以在其中创建出色的收藏主页有18个漂亮的主题可供选择。这些主题以网格结构排列。向下滚动时，每个主题将按顺序显示，并略有跳动负载。

16.行尸走肉

这个网站非常有创意，以一种视差滚动的方式讲述了一个惊心动魄的迷你僵尸电视节目。向下滚动，您将看到僵尸如何走进另一个场景。整个故事通过水平视差滚动自动播放。里面的动画非常棒，背景音乐营造出一种令人毛骨悚然的氛围。

17. Seymour Powel

该网站的设计师是一个多学科的设计研究团队，由战略家，品牌专家，产品经理，用户体验师，用户界面设计师和制造商组成。该站点具有不同的层以增加界面的深度并使用平滑的滚动视差效果。它更接近保时捷Volution的设计，但配色方案并不那么大胆。

18. Youandigraphics

该网站是您完全将设计理念变为现实的地方。设计师Irene DemetriI热衷于为各种类型和规模的大型和小型项目创建美观，直观的响应式网站。这个网站的视差不那么强烈。单击该按钮时，不同的元素将以相反的方向移动，从而创建一个简单的视差。

19. Bagigia

想象一下冬天喝热水瓶的感觉如何？这是Bagigia设计师的灵感来源，创建了一个关于热水瓶展示的网站。当您向下滚动时，页面的第一页将像窗帘一样上升并切换到可爱的热水瓶页面。该网站的视差效果也集中在第一页。另外，滚动时，底部有一个“拉链”进度条，从左向右移动，非常生动。

20. Anton&Irene

我真的很喜欢这个网站的配色方案，温暖干净的界面。 Anton和Irene的故乡穿着五颜六色的衣服看起来很酷。向下滚动时，它们退后一步，页面加载文本消息。大胆的字体和整体色彩营造出精彩的视觉体验。如果你把鼠标放在Anton&Iren身上，你可以看到他们的脸或鼻子。

21.普岑格尔

向下滚动鼠标时，在视差滚动中连续显示6页。每一页都是我们日常生活中清洁的场景。页面动画非常好，特别是垃圾自动进入垃圾桶的动画，这是发人深省的。

22.贝克特

本网站是您创意设计的不错选择。这是一个德国网站，但可以用多种语言切换。使用视差滚动增加网页插图的丰富性。但个人觉得这个网站的元素有点乱。

23.失落的世界博览会

这不是一个非常典型的视差滚动效果网站。滚动鼠标时，会有一个卡通人物进入神秘的管道。管道上有无数的窗口，允许角色在页面滚动时看到不同的场景。这个网站仍然有点有趣，看到这个角色经历所有场景并最终到达目的地很有趣。

这些是由Mockplus团队组织的视差滚动网站设计的一些示例。我不知道它对你有帮助吗？不要忘记使用Mockplus进行网络视差原型设计。

« 同样是“社区营销”为什么有人制造“粉丝经济”有人制定了金字塔计划？ | 按照这10个趋势，在2018年创建一个伟大的网页 »