十款关于视差滚动效果的插件与教程(Parallax Scrolling)

近些年来，用户对视觉体验的要求不断提高，而设计师们也开始在网页设计中加入各种特效元素以满足用户的需求。其中有一种特效的效果很具有吸引力，它就是视差滚动效果。视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，可以带来非常出色的视觉体验。 

随着这种炫酷的效果首次在Nike的 Nike Better World 项目中完美展现，如今这种视差滚动效果被越来越多的国外网站所应用，成为Web设计的热点趋势。因此，本文收集了十种关于此效果的教程和插件和大家分享，希望为你的网站设计提供一些灵感。 

这里两个方面需要大家注意： 

• 以大量图片为特色的网站应该考虑图像的预加载问题，以便为用户提供更好更流畅的视觉体验；
• 某些网站页面在移动设备上的效果可能较之在PC上有所不同，一些功能也可能无法正常使用。

1、Parallax Slider 

一个超级棒的插件，为你的网站提供纵深和滑动效果。 

 

2、Javascript视差效果 

一份帮助你增加网页立体层次感的教程。 

 

 

3、Nike Better World场景的背后 

一份为那些急切想重现NIKE网站滚动效果的设计师准备的教程。 

Nike Better World场景的背后 

 

 

4、用jQuery和CSS构建一个具有视差滚动效果的网站界面 

一份为那些想在此领域了解的更深的设计师准备的例子和教程。 

 

、

 

5、用JQuery创建一个时尚的具有视差背景的效果 

一份教程，在背景上帮你添加一些滚动的云彩。 

6、动画背景式的网页头部 

用一个动画式的网页头部来让你的访问者为你欢呼吧！ 

7、视差滚动教程 

一份视差效果和内容同时出现的有趣的教程。 

8、JQuery Image Prallax 

一个通过重复和动画运动产生立体错觉的插件。 

9、Stellar.js 

一个为任何滚动元素提供视差滚动效果的JQuery插件。 

10、Curtain.js 

允许你嵌入一个类似于幕布升起的效果到你的网页中。 

via ToolsCreator