10个优秀视差滚动插件

出处：https://www.w3cplus.com/source/10-best-Parallax-Scrolling-plugin.html

Parallax Scrolling

Plus

“Parallax Scrolling”这个词在2012年下半年的Web设计上越来越流行，一开始并不知道他是什么东东，只是字面上译为“视差滚动”，但对于实质上的东西，了解的并不是太多。随着2013年到来，国外很多专家预测“Parallax Scrolling”将会是2013年Web上的一个流行素。对于喜欢前沿的我来说，我觉得我有必要深入的了解他了。只有紧跟时代的Web人员，才会让你充满更多的新设计元素，新的设计理念，不至于那么容易淘汰。（至少我是这么想的(^_^)）。

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

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

说了这么多，我想大家最关心的还是如何实现这样的效果？或者说这样的效果要怎么实现？这也是我很关心的问题，那么从今天开始，我们一起来观注“Parallax Scrolling”这个流行词。首先今天整理了一些有关于制作“Parallax Scrolling”Web效果的一些插件，希望对大家有所帮助。

1. Stella.js

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

demo    download

2. Super Scrollorama

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

demo    download

3. jQuery Scroll Path

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

demo    download

4. Curtain.js

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

demo    download

5. Plax

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

demo    download

6. Scrolldeck

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

demo    download

7. jParallax

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

demo   download

8. Spritely

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

demo   download

9. Scrolling Parallax

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

demo    download

10. jQuery Waypoints

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

demo    download

上面是为大家搜集整理的有关于“视差滚动”的插件，希望这些插件能给你平时工作带来便利，我们也会在后面整理出更多有关于这方面的资料，比如说 step by step的教程，在线案例欣赏，优秀外文翻译等，希望后面的资料和教程能帮你更深一层的了解这个“视差滚动”，当然关键还是需要大家动手一试，不要感到害怕，要始终相信自己，你是最棒的。如果大家有这方面相关的资源，烦请在评论中跟贴，与大家共享。