3/16

为您的设计
寻找专业的前端切图服务。

滚动视差插件skrollr

这里要提到的一款滚动视差插件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