视差滚动(Parallax Scrolling)概念及10个实用插件

Parallax Scrolling”是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。近些年来，用户对视觉体验的要求不断提高，而设计师们也开始在网页中加入各种特效元素以满足用户的需求。这也是“Parallax Scrolling”具有吸引力，让很Web设计师亲眯的原因。而且现在很多网站已经开始在使用了，并且在今年将会更容易看到这样的网站诞生。

视差滚动效果简单点理解就是指用户让通过鼠标实现网页多层背景以不同的速度移动，从而形成立体的运动效果，带来非常出色的视觉和交互体验。这种特效最早是惊现在Nike 2011年的Nike Better World项目里，时至今日，这种视差滚动效果被越来越多的国外网站所应用，成为Web设计的热点趋势。这种网站通常通过鼠标滚轮滚动来实现，用超酷的视觉体验来取代枯燥的页面滚动，从而“吸引”用户走向自己的目标。

1. Stella.js

Stella.js能很容易帮助创建一个视差滚动网站。他的文档也非常的简单。先给你的网站添加数据，然后通过“stallar()”函数来调用。

demodownload

2. Super Scrollorama

Super Scrollorama很牛的一个插件，鼠标滚动来控制Web元素显示或隐藏。

demodownload

3. jQuery Scroll Path

没有垂直滚动，通过jQuery scroll path插件，你可以定义很多路径，来实现滚动效果。

demodownload

4. Curtain.js

这个插件充许你使用多个固定面板来创建一个页面，而且这些面板可以实现类似于卷帘的效果。

demodownload

5. Plax

Plax插件可以通过鼠标的悬浮或移动来触发视差滚动效果。

demodownload

6. Scrolldeck

相当简单的一个插件，以每个div作为一个幻灯片，用来制作视差滚动效果。

demodownload

7. jParallax

jParallax通过鼠标移动来控制节点的定位层，实现移动的视差效果。

demodownload

8. Spritely

Spritely是一个轻量级插件，通过简单的方法制作动画的sprites和动态滚动背景图，从而达到视差效果。

demodownload

9. Scrolling Parallax

Scrolling Parallax是一款通过滚动条或鼠标移动来实现视差效果的jQuery插件。它充许一张背景图片以不同的速度来移动，从而实现视差滚动效果。

demodownload

10. jQuery Waypoints

Waypoints是一个简单的jQuery插件，通过一个简单的函数就能实现视差滚动效果。

demodownload

 

原文地址：http://www.w3cplus.com/source/10-best-Parallax-Scrolling-plugin.html