• 首先，页面引入插件并初始化。
  • <script type="text/javascript" src="skrollr.min.js"></script>
<script type="text/javascript">
    var s = skrollr.init();
</script>

     

  • 然后设置你要设置的视差滚动的模块，比如下面一个div块。

    <div  
    data-1000="top:0%" 
    data-2000="top:30%" 
    data-3000="top:100%"> 
    哈哈哈，我可以在页面上滚动啦 
</div>

    以上html代码的 大概意思就是滚动条小于1000个像素的时候div距离页面顶部0%的位置， 在2000的时候距离页面顶部30% ，这样就有了向下滚动效果，3000同上，并且3000以后div位置不变。

  • 更高级一点的示例：1、data-start和data-end，滚动条开始和结束。2、加quadratic滚动效果：data-0="top[quadratic]:10%"，data-1000="top[quadratic]:100%"，滚动效果还有swing，cubic等。更更高级一点的示例可查看官方文档。

  • 除此之外还有回调等api。如：getScrollTop()返回当前滚动条的位置；duration动画应运行多长时间,以毫秒为单位;done完成回调；destroy()销毁事件，etc。

    　　　　

github：https://github.com/Prinzhorn/skrollr

官方示例：http://prinzhorn.github.io/skrollr/

参考资料：

视差滚动(Parallax Scrolling)效果的原理和实现    http://www.cnblogs.com/JoannaQ/archive/2013/02/08/2909111.html

中文教程  http://www.cnblogs.com/numbbbbb/archive/2013/06/02/3113959.html