视差动画 skrollr

库 官方API：https://github.com/Prinzhorn/skrollr#skrollrinitoptions

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

初始化skrollr

<script>
// 一定要在页面文档全部加载完成之后，再进行初始化skrollr
window.onload=function(){
    var s=skrollr.init({
        smoothScrolling:false, //滚动条停止的时候动画是否立即停止，默认true 不停止，存在过渡
        smoothScrollingDuration:500, //设置滚动条停止后，动画的过渡时间 单位ms
        constants:{  
            stepnum1: 100
        },
        forceHeight:false,  //是否允许动画脚本改变页面高度，以便适配触发时机  默认true 允许改变高度
        mobileDeceleration:0.01, //设置惯性参数，在移动设备上，通过这个参数，设置用户松开手指之后，滑动停止得有多快或者有多慢。设置为1表示不使用惯性  默认0.004
        edgeStrategy: 'set', //滚动条超过所定义的关键帧范围之外的时候，定义元素的状态;  'reset ' 动条的位置在所定义的关键帧范围之外的时候，元素的状态和关键帧没有任何关系了。这个时候，元素会显示没有添加关键帧之前的样式，即按照自己写的普通的css样式显示  默认值:'set'
        render: function(){
          //事件侦听函数
          console.log("完成一次渲染");
        },
        easing: {
            //定义新的运动函数或者是重写已经存在的运动函数
            WTF: Math.random,
            inverted: function(p) {
        return 1-p;
        }
        }
    });
}
//将变量用于变化
<div data-0="height:50px; bottom[WTF]:10%;" data-_stepnum1="height:100px; bottom[WTF]:50%;"></div>
</script>

改变样式

<div 
  data-0="background-color:rgb(0,0,255)" 
  data-500="background-color:rgb(255,0,0)"
>text...</div>
<div 
  data-0="height:20px" 
  data-300="height:100px"
>text...</div>
<div 
  data-0="background-color:rgb(0,0,255);transform:rotate(0deg);" 
  data-500="background-color:rgb(255,0,0);transform:rotate(360deg);"
>text...</div>

特性

• skrollr会自动html标签添加class="skrollr"并且会移除 class="no-skrollr"（如果存在的话）。
• 还会根据设备检测结果，给html标签添加class="skrollr-desktop"或者class="skrollr-mobile"以表明运行的平台
• skrollr会给关键帧添加 class ="skrollable-before" , class ="skrollable-between" 或者class ="skrollable-after" 。

方法

var s = skrollr.init();
console.log(s.getScrollTop());  //获取当前的scrollTop
console.log(s.getMaxScrollTop());  //获取最大scrollTop
console.log(s.isMobile()); //返回是否运行在移动端
s.setScrollTop(100,force = true);  //到达设置的scrollTop, 如果设置force=true,那么没有动画，否则有动画（默认有动画）
//控制滚动条从当前位置移动到我们通过top设置的位置，而且是有过渡动画的
s.animateTo(100, {'duration': 500, "easing": 'linear', "done": function(){
    console.log("动画执行完毕");
}});
s.stopAnimateTo();  //停止上面提到的滚动条移动动画
s.on('beforerender',function(){  console.log("渲染页面之前"); })  // 页面渲染之前，执行函数
s.on('render',function(){ console.log("渲染页面之后");  });    // 页面渲染之后，执行函数
s.off('render');  //移除了render的事件侦听函数