这里要提到的一款滚动视差插件skrollr，在滚动视差所有的js的插件里面，skrollr算的上是主流之选，也是在切图网的一个前端切图项目中才初次接触到它，虽然最后用了另外一款滚动视差插件 jquery.parallax-scroll.js， 不过这并不影响 skrollr的权威地位，只是在某个项目哪个更适用罢了。

skrollr基于JS开发，支持手机（Android，iOS，等）大小只有12K，上手简单，只需要简单的CSS和HTML知识即可轻松上手。

使用方法

1、添加css，css文件在examples目录里

<link href=”/build/css/fixed-positioning.css” rel=”stylesheet” type=”text/css” />
<link href=”/build/css/skrollr.css” rel=”stylesheet” type=”text/css” />

2、添加js，js文件在dist目录里

<script type=”text/javascript” src=”/build/js/skrollr/skrollr.min.js”></script>

针对IE9以下的浏览器，还需添加skrollr.ie.min.js

<!–[if lt IE 9]>
<script type=”text/javascript” src=”/build/js/skrollr/skrollr.ie.min.js”></script>
<![endif]–>

3、初始化
<script type=”text/javascript”>
var s = skrollr.init({
edgeStrategy: ‘set’,
easing: {
WTF: Math.random,
inverted: function(p) {
return 1-p;
}
}
});
</script>

PS:修改div中的data属性可自定义div出现的高度

想学web前端实战吗，加微信 dingxiangming82