Stellar.js视差插件

视差滚动（Parallax Scrolling）是什么？

　　视差滚动是当用户滚动页面时，前景和背景以不同的速度移动，从而创造出3D效果。 这种效果可以给网站一个很好的补充，但如果滥用，就会很烦人。 有些完全由这种效果驱动的网站会让人觉得不优雅。 因为这种效果通常使用大图像做背景，网站资源大量增加，导致加载非常缓慢。

stellar.js是什么？

　stellar.js是一个jQuery插件，能很容易的给网站添加视差效果。尽管已经停止了维护，但它非常稳定，与最新版本的jQuery兼容，很多开发者也在使用。这个插件在jQuery插件库里很流行。

Stellar.js入门

　　stellar.js很容易上手。第一步是下载插件并将它链接到你的页面。可以通过bower访问stellar.js的github仓库。如果你想使用bower，可以通过以下命令：

bower install jquery.stellar

下载好后，在页面中引用：

<script src="path/to/jquery/jquery.min.js"></script>

<script src="path/to/jquery/stellar.min.js"></script>

完成后，开始给页面添加视差滚动效果。这个插件允许将效果添加到任何滚动的元素，例如window对象，或者其他元素。要使用jQuery的选择器选中所需要的元素，在绑定stellar()方法即可。

$('#someElement').stellar();

 

对于window对象可以用下面的方法:

$stellar();

 

这样，stellar.js库就会在元素滚动时搜索parallax背景或元素，并重新定位。

 

具体看这里