滚动视差插件skrollr.js

使用：

1. 引入源码文件skrollr.min.js或skrollr.js；

   <script src="skrollr.js"></script>
   

2. 页面加载完成后，初始化skrollr；

   <script>
       window.onload=function(){
           var s=skrollr.init();
       }
   </script>
   

3. 在HTML代码中，给标签元素添加类似data-500="background:rgb(255,255,255);"属性，来控制样式变化；

   <!--
       当滚动条在顶部的时候，div的背景是白色；当滚动500px的时候，div的颜色变为黑色；滚动条滚动的过程中，颜色是逐渐由白色变为黑色；
   -->
   <div data-0="backgroundr:rgb(255,255,255)" data-500="background:rgb(0,0,0)"></div>
   

   1. 只需要写出关键帧的状态，skrollr会自己添加过渡帧。
   2. 至少要添加两个关键帧，如果只添加一个关键帧，是没有过渡效果的，但是这一帧的样式会作用于元素。
   3. 关键帧的书写顺序没有要求，谁在前谁在后最后的效果都一样。
   4. 动态改变颜色不支持名称（例如：red，green）和 16进制色值（例如：#ff0）必须使用 rgb() , rgba() , hsl() 或者 hsla()。
   5. skrollr无法监听到层级较深的元素的滚动条，实际项目发现，应该只能监听到2层，也就是body下面的第一个div可以监听到，层级再深就监听不到滚动了。

skrollr.init()的参数：

1. smoothScrolling：默认为true。在smoothScrolling:true情况下，滚动条停止的时候动画不会立即停止，而是有一个过渡，过渡时间可以自己设置；在smoothScrolling:false情况下，没有过渡，滚动条停止的时候，动画也立即停止。
2. smoothScrollingDuration：默认200。设置滚动条停止后，动画的过渡时间。
3. constants：定义常量，并且在HTML代码中引用这些常量。

   <div data-_t="height:50px"></div>
   <script>
       var s=skrollr.init({
           constants:{
               t:100    // 定义常量的时候，不需要加下划线
           }
       });
   </script>
   
   <!--上述代码等价于下面代码-->
   <div data-100="height:50px"></div>
   

4. forceHeight：默认为true。比如整个HTML页面的高度为1000px，但是给一个元素标签设置了data-1500=“background-color:rgb(255,0,0)”。在forceHeight:true的情况下，页面会一直往下滚到1500px的位置；在forceHeight:false的情况下，会阻止继续滚动，滚动到页面的底部，也就是1000px处，就停止。

方法：

1. get()：返回skrollr对象。
2. refresh([elements])：刷新传入的elements对象。传入的elements对象可以是Array, NodeList 或者jquery对象。如果不传入对象，则刷新所有。
3. getScrollTop()：获取当前的scrollTop。
4. setScrollTop(top[, force = false])：设置当前scrollTop。如果设置force=true，那么会直接无动画的到达设置的scrollTop。默认情况下是有动画的。
5. isMobile()：返回是否运行在移动端。