为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 JavaScript库——sk...

JavaScript库——skrollr.js中文教程

标签：
JavaScript

二、认识我们下载的代码包：

webp

  • dist文件夹 下是压缩版的源码文件skrollr.min.js

  • src文件夹 下是未压缩的源码文件skrollr.js

  • examples文件夹 和 test文件夹 是skrollr的实例代码，展示的是skrollr具体效果。大家有时间可以浏览，作为一个简单的参考

  • 其他的文件和文件夹我们大可不必去理会

三、skrollr使用方法：

1. 引入源码文件 skrollr.min.js 或者是 skrollr.js
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="skrollr.js"></script>
2.页面加载完成后，初始化skrollr
<script>
    // 一定要在页面文档全部加载完成之后，再进行初始化skrollr
    window.=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>

  • 注意事项：

    <div data-0="height:20px" data-300="height:100px"></div><div data-300="height:100px" data-0="height:20px"></div>
    <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>

    • 在设置颜色过度的时候，要使用background-color:rgb(0,255,0),不要使用background-color:blue，否则没有过度效果。

    • skrollr已经为我们处理这些讨厌的CSS前缀。

    • skrollr允许非线性动画，你可以把 easing、quadratic、cubic、begin/end、swing、sqrt、outCubic、bounce 放到属性后面的方括号里面，来控制不同的效果，还可以的通过easings 参数自定义运动函数

    • 我们只需要写出关键帧的状态，skrollr会自己添加过度帧。

    • 至少要添加两个关键帧，但是如果只添加一个关键帧，是没有过渡效果的，但是这一帧的样式会作用于元素。

    • 关键帧的书写顺序没有要求，即下面两种写法，最终的效果是一样的

四、skrollr的两种模式：absolute mode和relative mode

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"以表明运行的平台

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>

  • 返回结果：

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>

  • 效果展示：

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>

  • 效果展示：

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>

  • 效果展示：

webp



作者：振礼硕晨
链接：https://www.jianshu.com/p/ffe6eb46bb8f


点击查看更多内容
发表于 2018.10.31 13:05， 共 1434 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

慕虎7371278

手记
篇
粉丝
202
获赞与收藏
877

关注作者，订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习，写下你的评论
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

举报

0/150
提交
取消