视差滚动(Parallax Scrolling)效果的原理和实现

视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为今年网页设计的热点趋势，越来越多的网站应用了这项技术。

一、什么是视差滚动？

视 差效果，原本是一个天文学术语，当我们观察星空时，离我们远的星星移动速度较慢，离我们近的星星移动速度则较快。 当我们坐在车上向车窗外 看时，也会有 这样的感觉，远处的群山似乎没有在动，而近处的稻田却在飞速掠过。许多游戏中都使用视差效果来增加场景的立体感。说的简单点就是网页内的元素 在滚动屏幕 时发生的位置的变化，然而各个不同的元素位置变化的速度不同，导致网页内的元素有层次错落的错觉，这和我们人体的眼球效果很像。我看到多家产品 商用视差 滚动效果来展示产品，从不同的空间角度和用户体验，起到了非常不错的效果。

目前这种视差滚动效果被越来越多的国外网站所应用， 成为网页设计的热点趋势。

通 过一个很长的网页页面，其中利用一些令人惊叹的插图和图形，并使用视差滚动（Parallax Scrolling）效果，让多层背景以不同的速度移动， 形成立体的运动效果，带来非常出色的视觉体验。完美的展示了一个复杂的过程，让你犹如置身其中。 厌倦了千篇一律，呆板网页设计的你不放一试。

就是固定背景不让它随着滚动轴移动，但包含背景的容器是跟着滚动的，所造成的视觉差异看起来就像跟转换场景一样。

二、视差滚动效果的主要特点：

1、直观的设计，快速的响应速度，更合适运用于单页面

2、差异滚动 分层视差
页面上很多的元素在相互独立地滚动着，如果我们来对其它分层的话，可以有两到三层 ：背景层，内容层，贴图层。

三、原理

通过前景与背景在场景移动时产生不同的视差，从而达到简单的立体效果

页面上很多的元素在相互独立地滚动着，如果我们来对其它分层的话，可以有两到三层 ：背景层，内容层，贴图层

　　差异滚动的实现规则：

· 　　背景层的滚动(最慢)

· 　　贴图层(内容层和背景层之间的元素)的滚动(次慢)

· 　　内容层的滚动(可以和页面的滚动速度一致)

　　我们让三个图层的滚动速度不一致，就做出了漂亮的差异滚动效果

以上内容为网络摘抄，我自己的能力也有限，所以自己用jq摸索出来了一个，虽然还不是很完美，但是至少效果还是出来了。

是通过firefox来领悟的，领悟到了其中一些道理：

1、被警察相对于滚动条可以快也可以慢，是通过backgroundposition确定的。用jq的实现方法是——

$(window).scroll(function(){

x.css('background-position','5%' + $(window).scrollTop()*1.2 + 'px');

});

背景的css可滑动高度。position:relativ设z-index。

2、正文position为absolute。其他如常。

2、贴图，同样道理。

4、第二个背景图滚动视差开始的图片背景，都要用fixed。

笔记记得笔记凌乱，看DEMO中的代码。DEMO地址：http://www.fonglezen.com/static/paxll/

通过demo就会发现，就用了jq去实现，没有应用到HTML5和CSS3.需要简单实现视觉差效果的同学可以参考参考吧。

当然这只是一个起步，视觉差是没有这么简单的，学更多东西，做更好的东西。

只是记住，若有版权，请联系我

原文地址http://fonglezen.com/a/think/2014/0318/39.html