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

Question

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

做滚动网页的时候，是怎么实现页面的翻页？在做时间轴的时候，一般都要调用别人的js库。那么这个滚动页面，是不是也有一个js库？滚动时每层不同滚动速率…

关注者

237

被浏览

229,971

9 个回答

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

视差滚动，英文为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代码

$(document).ready(function () {
// 读取window
$window = $(window);
// 遍历包含“data-type”的元素，读取并设置Y偏移量、X位置、滚动速度等参数
$('[data-type]').each(function () {
$(this).data('offsetY', parseInt($(this).attr('data-offsetY')));
$(this).data('Xposition', $(this).attr('data-Xposition'));
$(this).data('speed', $(this).attr('data-speed'));
});
// 遍历符合 section[data-type="background"] 选择器的元素
$('section[data-type="background"]').each(function () {
// 存储一起基础变量
var $self = $(this),
offsetCoords = $self.offset(),
topOffset = offsetCoords.top;
// 当窗口滚动时
$(window).scroll(function () {
// 通过计算滚动条高度和窗口高度判断当前元素是否在视野中
if (($window.scrollTop() + $window.height()) > (topOffset) &&
((topOffset + $self.height()) > $window.scrollTop())) {
// 以设定的速度滚动背景
// 因为我们是向上滚动，所以背景的yPos是负值
var yPos = -($window.scrollTop() / $self.data('speed'));
// 如果此元素有一个Y偏移，将其添加上
if ($self.data('offsetY')) {
yPos += $self.data('offsetY');
}
// 最终的背景位置
var coords = '50% ' + yPos + 'px';
// 滚动背景
$self.css({ backgroundPosition: coords });
// 遍历本节点中的其他元素
$('[data-type="sprite"]', $self).each(function () {
// 读取data-type="sprite"规则的元素
var $sprite = $(this);
// 使用同样的方法进行滚动
var yPos = -($window.scrollTop() / $sprite.data('speed'));
var coords = $sprite.data('Xposition') + ' ' + (yPos + $sprite.data('offsetY')) + 'px';
$sprite.css({ backgroundPosition: coords });
});
// 遍历需要滚动的视频
$('[data-type="video"]', $self).each(function () {
// 读取data-type="video"规则的元素
var $video = $(this);
var yPos = -($window.scrollTop() / $video.data('speed'));
var coords = (yPos + $video.data('offsetY')) + 'px';
$video.css({ top: coords });
});
}; // in view
}); // window scroll
}); // each data-type
}); // document ready

四、总结和发散

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

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

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

1. Femme Fatale

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

Visit site

2. Every Last Drop

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

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

9 个回答

1. Femme Fatale

2. Every Last Drop

3. Beer Camp

4. Porsche Volution

5. Spokes

6. Hot Dot

7. Hobolobo

8. Firewatch

9. Nizo App

10. Peugeot

11. Bunkai

12. Melanie Daveid

13. The Boat

14. Dave Gamache

15. Assemble

16. Walking Dead

17. Seymour Powel

18. Youandigraphics

19. Bagigia

20. Anton＆Irene

21. Putzengel

22. Beckett

23. Lost Worlds Fairs

相关阅读：