这是摘自百度百科：
视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为今年网页设计的热点趋势，越来越多的网站应用了这项技术。什么是视差滚动？
视差效果，原本是一个天文学术语，当我们观察星空时，离我们远的星星移动速度较慢，离我们近的星星移动速度则较快。当我们坐在车上向车窗外 看时，也会有这样的感觉，远处的群山似乎没有在动，而近处的稻田却在飞速掠过。许多游戏中都使用视差效果来增加场景的立体感。说的简单点就是网页内的元素在滚动屏幕时发生的位置的变化，然而各个不同的元素位置变化的速度不同，导致网页内的元素有层次错落的错觉，这和我们人体的眼球效果很像。我看到多家产品商用视差滚动效果来展示产品，从不同的空间角度和用户体验，起到了非常不错的效果。
目前这种视差滚动效果被越来越多的国外网站所应用， 成为网页设计的热点趋势。
通过一个很长的网页页面，其中利用一些令人惊叹的插图和图形，并使用视差滚动（Parallax Scrolling）效果，让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。完美的展示了一个复杂的过程，让你犹如置身其中。厌倦了千篇一律，呆板网页设计的你不防一试。
1.原理
视差滚动原理是什么样的？从这一句就能知道：
当我们观察星空时，离我们远的星星移动速度较慢，离我们近的星星移动速度则较快。
因此在网页开发中我们让不同的层移动速度不一样就能达到这种效果。
2.层
对于网页开发人员来说，层的概念很熟悉；上面介绍让不同的层以不同速率滚动，那我们如何划分层，常见的这样划分：背景层、内容层、贴图层（内容与背景之间的层）这里划分三层并不是只有三层的意思，例如贴图层可能就有两层，两层滑动速率不一样；只是为了便于区分划分为贴图层，在这里没有明确规定几层，凭网页需要效果，如果复杂就可以多产生几层。
3.实现
简单实现：
最简单方法的之一：使背景固定不动
background-attachment:fixed
使背景不动，页面内容滑动，就产生分层的感觉，但立体效果不强，基本感觉不到
进阶：使背景以一定的速度滚动要比页面内容滚动慢
background-position:
在次需要用到js来操作，当滚动条滚动时，背景位置发生改变，例如当滚动条滚动100px;背景图位置只上移10px,这样就能看到一些立体效果。
熟练：
熟练只后我们就可以利用js让背景层，贴图层以各种不同的速率滚动，这样立体效果越明显
4.注意
当大量使用视差滚动的时候，对用户来说交互就少，因为都是按照开发者的效果滚动；再次会对页面导航有一定影响，因此页面需要较强的导航。
最后视差滚动的插件有很多，但建议对于较小的视差滚动效果还是自己手写代码为好，至于为啥？因为我觉得用插件不至于。还有在这里没有放源码，可能读起来有些生涩！但基本原理基本就是这样，如有纰漏，敬请指正。
给自己做个推广
个人网站：百咧个度，欢迎访问！
微博：柯琦-闲言碎语欢迎关注！
