skrollr.js是一款轻量级且强大的js库,关于这款js库的相关的详细教程却不多。
所以这里根据国内一些大神们的笔记和skrollr官方文档进行总结,方便自己以后查阅,也方便大家学习。
这里主要参考了 Shimily大神的skrollr中文教程,在这个基础上进行改进和完善。有什么不妥之处,还希望大家能够及时指出,共同修改。
一、skrollr 相关地址链接:
二、认识我们下载的代码包:
![img_99e178b83f397cc2ed5cc97a8eebaa69.png](https://yqfile.alicdn.com/img_99e178b83f397cc2ed5cc97a8eebaa69.png?x-oss-process=image/resize,w_1400/format,webp)
- dist文件夹 下是压缩版的源码文件skrollr.min.js
- src文件夹 下是未压缩的源码文件skrollr.js
- examples文件夹 和 test文件夹 是skrollr的实例代码,展示的是skrollr具体效果。大家有时间可以浏览,作为一个简单的参考
- 其他的文件和文件夹我们大可不必去理会
三、skrollr使用方法:
1. 引入源码文件 skrollr.min.js 或者是 skrollr.js
<script src="skrollr.js"></script>
2.页面加载完成后,初始化skrollr
<script>
// 一定要在页面文档全部加载完成之后,再进行初始化skrollr
window.onload=function(){
var s=skrollr.init();
}
</script>
3.在HTML代码中,给标签元素添加类似data-200="height:20px"
属性,来进行控制样式变化。
- 改变背景的实例:效果展示
<!--
当滚动条在顶部的时候,div的背景是蓝色
当滚动500px的时候,div的颜色变为红色
滚动条滚动的过程中,颜色是逐渐由绿色变为蓝色的
-->
<div data-0="background-color:rgb(0,0,255)" data-500="background-color:rgb(255,0,0)"></div>
- 改变高度的实例:效果展示
<!--
当滚动条在顶部的时候,div的高度是20px
当滚动300px的时候,div的高度是100px
滚动条滚动的过程中,高度是逐渐由20px变为100px的
-->
<div data-0="height:20px" data-300="height:100px"></div>v
- 旋转动画的实例:效果展示
<div data-0="background-color:rgb(0,0,255);transform:rotate(0deg);" data-500="background-color:rgb(255,0,0);transform:rotate(360deg);">WOOOT</div>
-
注意事项:
- 我们只需要写出关键帧的状态,skrollr会自己添加过度帧。
- 至少要添加两个关键帧,但是如果只添加一个关键帧,是没有过渡效果的,但是这一帧的样式会作用于元素。
- 关键帧的书写顺序没有要求,即下面两种写法,最终的效果是一样的
<div data-0="height:20px" data-300="height:100px"></div> <div data-300="height:100px" data-0="height:20px"></div>
- 在设置颜色过度的时候,要使用
background-color:rgb(0,255,0)
,不要使用background-color:blue
,否则没有过度效果。 - skrollr已经为我们处理这些讨厌的CSS前缀。
- skrollr允许非线性动画,你可以把 easing、quadratic、cubic、begin/end、swing、sqrt、outCubic、bounce 放到属性后面的方括号里面,来控制不同的效果,还可以的通过easings 参数自定义运动函数
<div data-0="background-color:rgb(0,0,255);transform[bounce]:rotate(0deg);" data-top="background-color:rgb(255,0,0);transform[bounce]:rotate(360deg);">WOOOT</div>
四、skrollr的两种模式:absolute mode和relative mode
![img_04e74869955738b012d29421729b63fb.png](https://yqfile.alicdn.com/img_04e74869955738b012d29421729b63fb.png?x-oss-process=image/resize,w_1400/format,webp)
1.absolute mode
格式 data-[offset]-[anchor]
offset: 可以使任意整数,默认值是0
anchor: 可以是start或者end
- data-0 = data-start = data-0-start:滚动条在位置0
- data-100 = data-100-start:滚动条滚动100px.
- data--100 = data--100-start:滚动条滚动-100px. (这个看起来是没有意义的,但是在relative mode里面会用到).
- data-end = data-0-end:滚动条距离底部为0的时候.
- data-100-end:100px 滚动条距离底部为100px的时候.
- data--100-end:滚动条距离底部为-100px的时候
2.relative mode
格式 data-[offset]-(viewport-anchor)-[element-anchor]
offset:可以使任意整数,默认值是0
viewport-anchor:表示视口的底部或者顶部可以是top、center、bottom
element-anchor:表示相对元素的顶部或者底部 可以是top、center、bottom
- data-top = data-0-top = data-top-top = data-0-top-top: 当参照元素的顶部和视口顶部对齐
- data-100-top = data-100-top-top:当参照元素的顶部距离视口顶部100px
- data--100-top = data--100-top-top:当参照元素的顶部距离视口顶部-100px
- data-top-bottom =data-0-top-bottom:当参照元素的底部在视口底部对齐
- data-center-center = data-0-center-center:当参照元素的中部在视口的中间.
- data-bottom-center = data-0-bottom-center:当参照元素和视口的底部对齐
3.特别提醒
- 有时候你可能需要参照另一个元素来确定关键帧,你需要用到 data-anchor-target
- 我们可以利用这一属性来制作 视察滚动 (后面会有专门的文章分享),所以这个属性特别重要
<div data-anchor-target="#foo"></div>
4.备注
- absolute mode 和 relative mode 的offset也可以是百分比,注意格式为 data-10p
<!--
当滚动条滚动十楼的10%的时候,div的高度是20px
当滚动条滚动十楼的30%的时候,div的高度是100px
-->
<div data-10p="height:20px" data-30p="height:100px"></div>
- absolute mode 和 relative mode 的offset前面都是可以放一个常量的。但是这个常量需要一个 标识符 使用的时候需要在这个标识符前面加 下划线
<div data-_t="height:50px" data-_t--50="height:10px" data-_t-500="height:100px"></div>
<script>
var s=skrollr.init({
constants:{
t:100 // 在定义常量的时候,不用加下划线
}
});
</script>
<!--上述代码等价于下面代码-->
<div data-100="height:50px" data-50="height:10px" data-600="height:100px"></div>
五、 skrollr的一些特性
1.自动给元素添加Class
- skrollr会自动html标签添加
class="skrollr"
并且会移除class="no-skrollr"
(如果存在的话)。 - 还会根据设备检测结果,给html标签添加
class="skrollr-desktop"
或者class="skrollr-mobile"
以表明运行的平台
![img_65e02ef3454454b495c1a26576bf5db3.png](https://yqfile.alicdn.com/img_65e02ef3454454b495c1a26576bf5db3.png?x-oss-process=image/resize,w_1400/format,webp)
- skrollr会给关键帧添加
class ="skrollable-before"
,class ="skrollable-between"
或者class ="skrollable-after"
。skrollr会根据关键帧所在的位置确定添加哪一个。
2.自动补全css属性
- 相邻的两个关键帧,如果前一个关键帧设置了某一个css属性,例如
left:0%
,但是后二个关键帧没有设置,那么skrollr会在后一个关键帧处,自动将该css属性设置为前一个关键帧处的属性值left:0%
。 - 特别注意的是,这里自动补全是针对相邻的两个关键帧。如果一个元素有多个关键帧,则从左到右,依次自动补全相邻的两个关键帧的css属性。
- 因此,下面两行代码是等价的
<div data-100="left:0%;" data-200="top:0%;" data-300="left:50%;" data-400="top:50%;"></div>
<div data-100="left:0%;top:0%;" data-200="left:0%;top:0%;" data-300="left:50%;top:0%;" data-400="left:50%;top:50%;"></div>
3.注意事项
- 所有的数字值都需要单位0也不例外。
- 复合写法
margin:0px 0px 0px 0px;
对应margin:0px 100px 50px 3px;
但是不能对应margin:10px;
值的数量必须保持一致,否则会出错。 - css3 transform 里面的属性顺序必须一致。例如
transform: scale(10) translate(20px);
可以对应transform: scale(25) translate(60px);
但是不可以对应transform:translate(60px) scale(25);
- 动态改变颜色不支持名称(例如:red,green)和 16进制色值(例如:#ff0)必须使用 rgb() , rgba() , hsl() 或者 hsla()
- 而且必须对应使用,不能第一个关键帧使用rgba(),下一个关键帧就换成hsla()
六、 skrollr.init()中的参数
我们在初始化skrollr的时候,可以通过设置一些参数,来控制滚动条运动的时候的一些效果,这里列出一些非常常用的参数。
1.smoothScrolling
- 默认值:true
- 作用:在
smoothScrolling:true
情况下,滚动条停止的时候动画不会立即停止,而是有一个过渡,过渡时间可以记性设置。在smoothScrolling:false
情况下,没有过渡,滚动条停止的时候,动画也立即停止。 - 示例代码:
<script>
var s=skrollr.init({
smoothScrolling:false
});
</script>
- 如果在这里设置
smoothScrolling:false
,那么整个页面上的元素都没有了过渡效果。在这种情况下,如果想给指定的元素设置过渡效果,可以采用添加属性data-smooth-scrolling="on"
<div data-100="height:50px" data-50="height:10px" data-600="height:100px" data-smooth-scrolling="on"></div>
2.smoothScrollingDuration
- 默认值:200
- 单位:ms
- 作用:设置滚动条停止后,动画的过渡时间
- 示例代码:
<script>
var s=skrollr.init({
smoothScrollingDuration:500
});
</script>
3.constants
- 作用:定义常量,并且在HTML代码中引用这些常量
- 示例代码:
<div data-_t="height:50px" data-_t--50="height:10px" data-_t-500="height:100px"></div>
<script>
var s=skrollr.init({
constants:{
t:100, // 在定义常量的时候,不用加下划线
i:10,
j:200
}
});
</script>
<!--上述代码等价于下面代码-->
<div data-100="height:50px" data-50="height:10px" data-600="height:100px"></div>
4.forceHeight
- 默认值:true
- 作用:假如你整个HTML页面的高度为1000px,但是给一个元素标签设置了
data-1500="background-color:rgb(255,0,0)"
。在forceHeight:true
的情况下,页面会一直往下滚到1500px的位置;在forceHeight:false
的情况下,会阻止继续滚动,滚动到页面的底部,也就是1000px处,就停止。 - 示例代码:
<script>
var s=skrollr.init({
forceHeight:false
});
</script>
4.mobileCheck=function() {...}
- 作用:这个参数允许我们,定义一个检测移动端的检测函数来覆盖默认的检测函数。个人觉得用处不是很大。
- 示例代码:
<script>
var s=skrollr.init({
mobileCheck:function(){
return (/Android|iPhone|iPad|iPod|BlackBerry/i).test(navigator.userAgent || navigator.vendor || window.opera);
}
});
</script>
5.mobileDeceleration
- 默认值:0.004
- 作用:设置惯性参数,在移动设备上,通过这个参数,设置用户松开手指之后,滑动停止得有多快或者有多慢。设置为1表示不使用惯性。
- 示例代码:
<script>
var s=skrollr.init({
mobileDeceleration:0.01
});
</script>
6.edgeStrategy
- 默认值:set
- 作用:滚动条超过所定义的关键帧范围之外的时候,定义元素的状态。即滚动条的位置在 第一帧之前 或者在 最后一帧之后 的时候,定义元素的状态。
- 可能取值:set、ease、reset
-
edgeStrategy:'set'
:如果滚动条的位置在第一帧之前,那么元素保持第一帧的状态;如果滚动条的位置在最后一帧之后,那么元素保持最后一帧的状态。 -
edgeStrategy:'ease'
:效果同上。只不过ease会根据easing里面定义的函数变化。我觉得不用太过理会这一变化。. -
edgeStrategy:'reset'
:滚动条的位置在所定义的关键帧范围之外的时候,元素的状态和关键帧没有任何关系了。这个时候,元素会显示没有添加关键帧之前的样式,即按照自己写的普通的css样式显示。
7.skrollrBody
- 默认值:skrollr-body
- 作用: 设置新的值来设置覆盖默认的id选择符。它功能在移动设备上非常重要。如果我们没有去更改
skrollrBody
的数值,那么我们需要给 skrollr容器元素 添加id="skrollr-body"
。如果我们修改了skrollrBody
的数值,那么相对应的 skrollr容器元素 的id值也要修改。否则在移动设备上无法正常使用skrollr.js - 示例代码:
<script>
var s=skrollr.init({
skrollrBody:'my-body' // 一般不建议修改
});
</script>
8.beforerender
- 作用:这是一个事件侦听函数,每一次我们滑动鼠标或者拖动滚动条的时候,skrollr.js就会渲染页面。在渲染页面之前,这个函数会执行。
- 备注:这个函数的功能,我到现在都没搞明白,所以下面先给出原本的英文解释。等自己搞明白了,再进行修改。
- A listener function that gets called each time right before we render everything. The function will be passed an object with the following properties:
{
curTop: 10, //the current scroll top offset
lastTop: 0, //the top value of last time
maxTop: 100, //the max value you can scroll to. curTop/maxTop will give you the current progress.
direction: 'down' //either up or down
}
- Returning
false
will prevent rendering.
8.render
- 作用:这是一个事件侦听函数,每一次我们滑动鼠标或者拖动滚动条的时候,skrollr.js就会渲染页面。在渲染页面之后,这个函数会执行。
- 示例代码:
<script>
var s=skrollr.init({
render:function(){
console.log("完成一次渲染");
}
});
</script>
9.easing
- 作用:用来定义新的运动函数或者是重写已经存在的运动函数,用来控制元素运动时候时候的效果。
- 下面列出skrollr内置的一些运动函数:
-
linear
:线性运动,是默认的运动函数。如果不对元素设置运动函数,元素会线性运动。 -
quadratic
: 二次方程式运动函数 -
cubic
: 三次方程式运动函数 -
cubic
: 三次方程式运动函数 -
begin/end
:分别返回0和1,没有动画。直接从第一帧的状态调到最后一帧的状态。 -
swing
:开始的时候很慢,但是后面会慢慢加速 -
sqrt
:开始的时候很快,但是后面会慢慢减速 -
bounce
:像球一样运动,进入 网站,查看图解 - 如何定义新的运动函数:
<script>
// 下面这些事官方给出的事例
// 但是我在实际测试的时候,发现这种方式定义的运动函数,不能使用
// 即使正常使用定义的wtf,但是元素还是使用默认的linear方式运动
// 所以大家这里做一个参看即可
skrollr.init({
easing: {
//This easing will sure drive you crazy
wtf: Math.random,
inverted: function(p) {
return 1 - p;
}
}
});
</script>
- 如何重写已有的运动函数:
<script>
var s = skrollr.init({
// 重写linear运动函数
// 注意这里的函数的返回值的范围是[0,1]
// 如果我们对已有的函数进行重写,那么是有效的,可以改变元素的运动状态
easing:{
linear:function(){
return 0.5;
}
}
})
</script>
- 如何使用运动函数:
<!--
直接把easing、quadratic、cubic、begin/end、swing、sqrt、outCubic、bounce
放到属性后面的方括号里面,来控制不同的效果
-->
<div data-0="background-color:rgb(0,0,255);transform[bounce]:rotate(0deg);" data-top="background-color:rgb(255,0,0);transform[bounce]:rotate(360deg);">WOOOT</div>
七、skrollr中的API:
1.skrollr.get()
- 作用:返回skrollr事例对象
- 示例代码:
<script>
var s = skrollr.init();
console.log(skrollr.get());
</script>
- 返回结果:
![img_8febb76f22f9d037c409d36d6c24bb86.png](https://yqfile.alicdn.com/img_8febb76f22f9d037c409d36d6c24bb86.png?x-oss-process=image/resize,w_1400/format,webp)
2.refresh([elements])
- 作用:刷新传入的
elements
对象,这些传入的elements
对象可以是Array, NodeList 或者jquery对象。 - 备注:如果不传入对象,则刷新所有
3.getScrollTop()
- 作用:获取当前的scrollTop
- 示例代码:
<script>
var s = skrollr.init();
console.log(s.scrollTop());
</script>
4.getMaxScrollTop()
- 作用:获取最大scrollTop
- 示例代码:
<script>
var s = skrollr.init();
console.log(s.getMaxScrollTop());
</script>
5.setScrollTop(top[, force = false])
- 作用:设置当前scrollTop
- 备注:如果设置
force=true
,那么会直接无动画的到达设置的scrollTop。默认情况下是有动画的 - 示例代码:
<script>
var s = skrollr.init();
s.setScrollTop(100,force = true);
</script>
6.isMobile()
- 作用:返回是否运行在移动端
- 示例代码:
<script>
var s = skrollr.init();
alert(s.isMobile());
</script>
- 效果展示:
![img_b133ed499b78588ab3cd54805953c952.png](https://yqfile.alicdn.com/img_b133ed499b78588ab3cd54805953c952.png?x-oss-process=image/resize,w_1400/format,webp)
7.animateTo(top[, options])
- 作用:控制滚动条从当前位置移动到我们通过
top
设置的位置,而且是有过渡动画的。我认为这是一个很好用API。 - options有三个可选参数,注意options要以一个对象的形式传值:
-
duration
:过渡时间,单位是ms。默认值是1000ms -
easing
:运动函数,默认是linear -
done
:回调函数,动画执行完成后执行 - 示例代码:
<script>
var s = skrollr.init();
s.animateTo(100, {'duration': 500, "easing": 'linear', "done": fn});
// 定义回调函数,也可在options中使用匿名函数
function fn() {
alert("动画执行完毕");
}
</script>
8.stopAnimateTo()
- 作用:停止上面提到的滚动条移动动画
9.on(name, fn)
- 作用:给
beforerender, render, keyframe
添加事件侦听函数。 - 示例代码:
<script>
var s = skrollr.init();
// 页面渲染之前,执行函数
s.on('beforerender',function(){
console.log("渲染页面之前");
})
// 页面渲染之后,执行函数
s.on('render',function(){
console.log("渲染页面之后");
})
// 需要说明的是,如何给keyframe添加事件侦听函数,我没有理解
// 官方文档中也没有给出示例代码
// 感觉这一点还是有点坑
</script>
- 效果展示:
![img_0329a00925a0e872a04c6091725b44a3.png](https://yqfile.alicdn.com/img_0329a00925a0e872a04c6091725b44a3.png?x-oss-process=image/resize,w_1400/format,webp)
10.off(name)
- 作用:移除上面添加的事件侦听函数
- 示例代码:
<script>
var s = skrollr.init();
// 页面渲染之前,执行函数
s.on('beforerender',function(){
console.log("渲染页面之前");
})
// 页面渲染之后,执行函数
s.on('render',function(){
console.log("渲染页面之后");
})
// 移除了render的事件侦听函数
s.off('render')
</script>
- 效果展示:
![img_65e02ef3454454b495c1a26576bf5db3.png](https://yqfile.alicdn.com/img_65e02ef3454454b495c1a26576bf5db3.png?x-oss-process=image/resize,w_1400/format,webp)
以上便是我对skrollr.js这个轻量级js库的总结。
如果文章中有错误的地方,或者遗漏了某些重要的知识点,欢迎大家及时指出,我会及时修正。
最后还是要说一句,如果你的英文不是特别差的话,推荐大家读读英文原版文档。
看到全英文,不用慌,慢慢读,你肯定看得懂。