滚动视差含义及相关js插件介绍

栏目分类：效果代码   发布日期：2016-04-03   来源：   浏览次数：次

视差（Parallax）是指从不同的点看一个物体时形成的视觉差异，这个名词是源自希腊文的παράλλαξις (parallaxis)，意思是”改变”。

视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。

视差效果，原本是一个天文学术语，当我们观察星空时，离我们远的星星移动速度较慢，离我们近的星星移动速度则较快。当我们坐在车上向车窗外 看时，也会有这样的感觉，远处的群山似乎没有在动，而近处的稻田却在飞速掠过。许多游戏中都使用视差效果来增加场景的立体感。

说的简单点就是网页内的元素在滚动屏幕时发生的位置的变化，然而各个不同的元素位置变化的速度不同，导致网页内的元素有层次错落的错觉，这和我们人体的眼球效果很像。我看到多家产品商用视差滚动效果来展示产品，从不同的空间角度和用户体验，起到了非常不错的效果。

收集的一些js插件：

1、ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果，帮助你的网站增加吸引力。只需要给元素增加 data-scrollreveal 属性，当元素进入可视区域的时候会自动被触发设置好的动画。 http://julianlloyd.me/scrollreveal/

2、Headroom.js – 快速响应用户的页面滚动操作http://wicky.nillia.ms/headroom.js/ 
摘要: Headroom.js 是一个轻量级，高性能的JS插件（无依赖性！），允许你响应用户的滚动行为。Headroom.js 使您能够在适当的时候把元素融入视图，而其它时候让内容成为焦点。Headroom.js 简单易用，它有一个纯 JS API，以及可选的 jQuery、Zepto 和 AngularJS 兼容的插件。

3、Parallax.js – 自适应智能设备方向的视差效果插件https://github.com/wagerfield/parallax/ 
Parallax.js 是一个简单的，轻量级的的视差引擎，能够对智能设备的方向作出反应。在没有没有陀螺仪或运动检测硬件可用的时候，使用光标的位置来代替。有很多的行为，你就可以设置为任何给定的视差实例。这些行为既可以通过在标记中指定的数据属性或通过构造函数 和 JavaScript API 调用。

4、Owl Carousel – 支持触摸的 jQuery 响应式传送带插件http://owlgraphic.com/owlcarousel/ 
Owl Carousel 是一个 jQuery 插件，使我们能够迅速地创建响应式传送带滑块。这个插件是触摸友好的，能与几乎任何的 HTML 内容兼容使用。另外，强大的选项设置支持分页/滑动速度，启用/禁用自动播放，显示子弹导航等等。

5、jQuery localscroll (文章之间顺差滚动插件)http://www.flesler.blogspot.com/2007/10/jquerylocalscroll-10.html

6、jQuery scrollTo (最主要的平滑滚动)http://www.flesler.blogspot.com/2007/10/jqueryscrollto.html

7、jQuery Inview (判断一篇文章是否在浏览)http://remysharp.com/2009/01/26/element-in-view-event-plugin/

8、jScrollPane 跨浏览器设置样式的滚动条与jQuery和CSShttp://jscrollpane.kelvinluck.com/index.html