如何实现视差滚动效果的网页？

时间：2024-02-15 18:35:02 | 来源：网站运营

时间：2024-02-15 18:35:02 来源：网站运营

如何实现视差滚动效果的网页？：让一个网站看起来酷炫，丰富，具有吸引力。你可以添加多种多样的设计效果和技巧。而视差滚动效果则是其中一个很不错的选择。




视差滚动，英文为Parallax Scrolling，是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。网页设计中的视差效果的最常见的一种，就是用户在向下滚动页面或跨页面时可以创建3D滚动效果。视差设计如果做得好，将会大大提升用户体验，吸引更多的用户。




以下为视差滚动教程，并为大家整理了20多个视差滚动网站设计。




一、例子




SmaShing

Spark

QQ浏览器




二、原理




传统的网页的文字、图片、背景都是一起按照相同方向相同速度滚动的，偶尔有一些背景固定的网页。

顾名思义“视差滚动”就是通过滚动这个行为实现视觉上的层次错落的错觉，从而形成立体的运动效果。

其实分析各个优秀的例子网站，不难发现其实原理一样的，手法上也大同小异，都是通过控制多层的透明背景，在滚动的时候不再是只向上运动，而是以不同的速度、不同的方向去运动，再结合现实世界的运动规律，从而达到很棒的视觉冲击和交互




三、讲解




先分析下SmaShing 这个相对简单的例子。

观察此例子不难发现实现方法：最上层的页面元素（文字、图片）按照正常的方式滚动，背景通过JS往下方运动，从而实现了视差滚动

可以发现主体是由4个section标签组成的：







注意看属性：

data-type 类型，JS用来按类型选取元素

data-speed 速度，用于储存移动速度，供JS调用

style="background-position: 50% 0px;"


注意看这个行内属性 background-position 用来控制背景的位置，这个就是本例子的关键所在

我们滚动一段，通过firebug可以检测到此属性的变化







往下滚动的时候，此属性的值越来越小，我们都知道第二个参数代表Y轴方向，越小往下方偏移越多，从而看起来背景是往下方运动

下面我们看下作者是怎么通过JS控制的，附上源码：




Js代码

1. $(document).ready(function () {
2. // 读取window
3. $window = $(window);
4. // 遍历包含“data-type”的元素，读取并设置Y偏移量、X位置、滚动速度等参数
5. $('[data-type]').each(function () {
6. $(this).data('offsetY', parseInt($(this).attr('data-offsetY')));
7. $(this).data('Xposition', $(this).attr('data-Xposition'));
8. $(this).data('speed', $(this).attr('data-speed'));
9. });
10. // 遍历符合 section[data-type="background"] 选择器的元素
11. $('section[data-type="background"]').each(function () {
12. // 存储一起基础变量
13. var $self = $(this),
14. offsetCoords = $self.offset(),
15. topOffset = offsetCoords.top;
16. // 当窗口滚动时
17. $(window).scroll(function () {
18. // 通过计算滚动条高度和窗口高度判断当前元素是否在视野中
19. if (($window.scrollTop() + $window.height()) > (topOffset) &&
20. ((topOffset + $self.height()) > $window.scrollTop())) {
21. // 以设定的速度滚动背景
22. // 因为我们是向上滚动，所以背景的yPos是负值
23. var yPos = -($window.scrollTop() / $self.data('speed'));
24. // 如果此元素有一个Y偏移，将其添加上
25. if ($self.data('offsetY')) {
26. yPos += $self.data('offsetY');
27. }
28. // 最终的背景位置
29. var coords = '50% ' + yPos + 'px';
30. // 滚动背景
31. $self.css({ backgroundPosition: coords });
32. // 遍历本节点中的其他元素
33. $('[data-type="sprite"]', $self).each(function () {
34. // 读取data-type="sprite"规则的元素
35. var $sprite = $(this);
36. // 使用同样的方法进行滚动
37. var yPos = -($window.scrollTop() / $sprite.data('speed'));
38. var coords = $sprite.data('Xposition') + ' ' + (yPos + $sprite.data('offsetY')) + 'px';
39. $sprite.css({ backgroundPosition: coords });
40. });
41. // 遍历需要滚动的视频
42. $('[data-type="video"]', $self).each(function () {
43. // 读取data-type="video"规则的元素
44. var $video = $(this);
45. var yPos = -($window.scrollTop() / $video.data('speed'));
46. var coords = (yPos + $video.data('offsetY')) + 'px';
47. $video.css({ top: coords });
48. });
49. }; // in view
50. }); // window scroll
51. }); // each data-type
52. }); // document ready

四、总结和发散




通过分析上面的例子我们发现，其实就是通过JS去移动背景，此例子只是反向滚动了背景，已经达到了不错的效果。

我们可以向多个方向去扩展和发散：1.多层背景已不同的速度、不同的方向、不同的效果去滚动 2.页面上的元素可以用JS或jQuery去实现不同的效果，配合背景能达到很好的效果。




五、视差滚动网站设计案例

1. Femme Fatale

Femme Fatale是一家专注于文化，奢侈品，社论和艺术的创意工作室。它包含了精彩的动画互动页面，可以很好的调动访客的情绪。当你向下滚动页面时，页面背景会伴随页面滚动条进行切换，每个页面的背景色各不相同，在页面滚动切换时，页面文本会以不同的速度载入，和页面图像等其他元素形成视差滚动。




Visit site

2. Every Last Drop

Every Last Drop是一个展示生活用水场景的网站，旨在呼吁关注地球水资源，节约水资源。设计师以等比例分割页面进度条，当你向下滚动页面时，您会看到各种不同的生活场景里水资源是如何被消耗的，并且展示水资源使用的占比等数据。每个场景的切换都带有动画视差效果。在其“Universe”页面还增加了3D视差滚动效果。




Visit site.

3. Beer Camp

Beer Camp整个网站页面划分为5个页面层，当你滚动时会有一种“一镜到底”的感觉。并且它的视差滚动效果非常与众不同，它既不是水平也不是垂直的，而是一种平滑缩放的效果。当你滚动页面时，各个层都可以连贯地依次放大到页面最前端。加上明亮的配色和粗放的版式，创造出一种惊人的空间感。




Visit site.

4. Porsche Volution

Porsche Volution完全可以看出设计师对汽车的热爱以及对保时捷品牌的浓厚兴趣。整个页面设计以视差滚动照片的形式展示了保时捷的进化，并且配有高雅的背景音乐，配色惊艳。屏幕左侧有一个时间轴，向下滚动时，可以清晰的看到保时捷的进化历程。




Visit site.

5. Spokes

Spokes Eclectic Pedicab Rides是一个提供停车和公共交通的即时解决方案的网站。这个网站号召绿色生活和经济生活，对以倡导骑车为中心的社区文化有极大的意义。该网站是漫画风格，滚动页面时会以不同进度载入页面元素，具有丰富的视差效果。顶部导航栏的设计也是一个亮点。




Visit site.

6. Hot Dot

Hot Dot和上面的视差例子又不尽相同，它是水平视差滚动。页面从左到右以平滑的3D视差效果推进，页面元素和纯黑色背景搭配具有不错的美感。这个网站也是响应移动优先设计的一个很好例子。页面底部有可点击的CTA，方便用户访问。




Visit site.

7. Hobolobo

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




Visit site.

8. Firewatch

Firewatch是一个荒野探险类的设计网站。该网站有6个移动层组成，展现出页面的丰富感和深度感。它的视差效果仅在第一个页面使用，当页面滚动时，元素向上推进，营造出一种3D效果，让我想起《狮子王》里的经典镜头。其他页面都是平滑的静态页面，方便用户读取大量的文本信息。




Visit site.

9. Nizo App

这绝对是我的最爱的视差滚网站之一。当滚动鼠标时，所有UI元素以特定的不同节奏向页面中央聚集，形成一个排版精致的整体。当鼠标滚回时，所有元素又从中心分离，形象生动，极具动感。整个页面风格干净简单，采用了纯色背景和粗文本。




Visit site.

10. Peugeot

这是一个很酷的网站，当你滚动鼠标时，你会进入一个精彩的故事情景里。它以视差滚动的方式自动播放漫画故事，视差效果会根据故事情节会采用水平或垂直两种展现方式。

Visit site.

11. Bunkai

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




Visit site.

12. Melanie Daveid

Melanie Daveid会带给你一个数字世界的美妙体验。精致的细节展示和品牌指南使它在视觉上有惊人的效果。滚动时，页面被分成两部分，左侧页面静止，而右侧则继续滚动，形成一种视差。




Visit site.

13. The Boat

这也是通过讲故事的方式展示网站视差设计。The Boat共有6章，每章节以视差幻灯片形式演示了各个不同的情节，移动视差层也有利于创造深度感。我个人也很喜欢这种素描风格的页面元素。




Visit site.

14. Dave Gamache

该视差滚动网站采用纯深色背景。当你向下滚动鼠标时，界面右侧有UI元素淡入淡出。此外，有一款手机会在你滚动时页面时有节奏的旋转。




Visit site.

15. Assemble

Assemble是一个免费的在线的作品集网站，您可以制作出精彩的作品集。首页有18个美丽的主题可供选择，这些主题以网格结构排列，当你向下滚动时，每各主题会依次展示，伴随轻微的跳动载入。




Visit site.

16. Walking Dead

这个网站很有创意，以视差滚动的方式讲述一个惊悚的迷你僵尸电视剧。向下滚动鼠标，你会看到一个丧尸如何走向不同的场景。整个故事以水平视差滚动自动播放。里面的动画真的很棒，另外背景音乐也创造了一种令人毛骨悚然的氛围。




Visit site.

17. Seymour Powel

该网站的设计师是一个多学科的设计研究团队，有战略家，品牌专家，产品经理，用户体验师，用户界面设计师和制造商。该网站有不同的图层可以增加界面深度，并且采用平滑滚动的视差效果。和Porsche Volution的设计比较接近，只是配色没有那么大胆。




Visit site.

18. Youandigraphics

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




Visit site.

19. Bagigia

想象一下，冬天里，怀抱一个热水袋感觉怎么样呢？这就Bagigia的设计师的灵感来源，创造一个关于热水袋展示的网站。当你向下滚动时，第一个网页页面会像幕布一样升上去，切换到一个可爱的热水袋的页面。该网站的视差效果也几乎集中在第一页。另外，滚动时，底部有一个“拉链”进度条，从左向右移动，很生动。




Visit site.

20. Anton＆Irene

我很喜欢这个网站的配色，温暖干净的界面。首页的安东和艾琳穿着一件色彩鲜艳的衣服看起来很酷。当向下滚动时，他们则会退后一步，同时页面载入文本信息。粗字体和整体色彩创造了一种美妙的视觉体验。如果你将鼠标放在Anton＆Iren身上，就可以看到他们的脸部或一个鼻子。




Visit site.

21. Putzengel

向下滚动鼠标时，会以视差滚动的方式连续显示6个页面。每一个页面都是日常生活中我们做清洁的场景。页面动画非常不错，尤其那个垃圾自动进入垃圾桶的动画，引人深思。




Visit site.

22. Beckett

该网站是您进行创意设计的一个不错选择，它是一个德国网站，但有多种语言可以切换。通过使用视差滚动来增加了网页插图的丰富度。但个人觉得这个网站的元素有些许杂乱。




Visit site.

23. Lost Worlds Fairs

这也不是一个非常典型的视差滚动效果网站，当滚动鼠标，会有一个卡通人物进入一个神秘的管道，管道上有无数的窗口，可以让该人物在页面滚动时看到不同的场景。这个网站还是有一定的趣味性，看这个人物经历所有场景并最终到达他的目的地非常有趣。




Visit site.




以上就是Mockplus团队整理的一些视差滚动网站设计例子。不知道是不是对您有所帮助呢？不要忘了使用Mockplus去进行网页视差原型设计哦。还没有尝试过的小伙伴，点击https://www.mockplus.cn下载，相信你也可以做出同样精彩的设计。欢迎交流。

相关阅读：

在资金有限的情况下，创业公司如何找到合适的开发师

普通程序员该如何进阶为全栈工程师？

网页设计师和网页前端开发我该选择哪一个

什么样的原型更受开发欢迎 ？

进阶学习，如何无代码设计一款美观且实用的网站

2018年交互设计旅程中的7个设计趋势

这9款小众时尚的酒店网站设计，让你不再恋家

收集网站用户反馈的5个常用问题

10个最新优秀手机应用界面设计实例

干货！15个最新优质加载动画设计，让等待成为一种享受

“手把手教你设计”-12个最佳手机APP界面设计教程

---