skrollr 中文教程

时间  2019-12-09
标签 skrollr 中文 教程 繁體版
原文   原文链接

 

个人博客搬家到https://www.w2le.com/了

 

skrollr 0.6.29

skrollr是一个单独的视差滚动的JavaScript库，移动端（Android，iOS，等）和pc均可以使用，压缩后大小仅仅不到12Kjavascript

 

使用方法

首先你须要引入skrollr.min.js文件，而后在文档加载完成后调用init()函数css

<script type="text/javascript" src="skrollr.min.js"></script>
    <script type="text/javascript">
    var s = skrollr.init();
    </script>
</body>html

改变背景的例子，当滚动条在顶部的时候颜色是rgb(0,0,255)。当滚动500px颜色是rgb(255,0,0)，你只须要写出关键帧的状态，skrollr会本身添加过分帧。java

<div data-0="background-color:rgb(0,0,255);" data-500="background-color:rgb(255,0,0);">WOOOT</div>jquery

View in browsercss3

默认状况下skrollr认为页面能够滚动到500px急即便你的页面长度不够500，若是想阻止这种状况发生只要使用forceHeight属性就能够默认是true，将其设为false就能够阻止：git

skrollr.init({
        forceHeight: false,
        easing: {
            vibrate: function(p) {
                return Math.sin(p * 10 * Math.PI);
            }
        }
    });github

最好不要使用#00f或者#0000ff，最好使用rgb或者hsl由于他们会致使不同的动画效果，一般状况下hsl会更加酷炫。（这里美人也没看太懂，试了试16禁止的颜色也是有效果的）dom

<div style="line-height:30px;font-size:20px;background:#ccc;" data-0="transform:rotate(0deg);" data-500="transform:rotate(90deg);"></div>测试了一下红色部分必须带单位，不然不会出现中间的过渡动画函数

如今让咱们给上个例子添加旋转动画吧

<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>

View in browser

skrollr为你处理全部这些讨厌的CSS前缀。

skrollr容许非线性动画，你能够吧所谓的easing function放到属性后面的 方括号里面，还能够的经过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>

View in browser

从skrollr 0.6.0开始支持移动端

两个模式 absolute mode和relative mode

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的时候

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: 当参照元素和视口的底部对齐.

有时候你可能须要参照另外一个元素来肯定关键帧你须要用到 data-anchor-target

<div data-anchor-target="#foo"></div>

View in browser

若是文档结构有变化须要调用 refresh() 函数

 

 absolute mode 和 relative mode 的offset也但是是百分比 写法是<div data-_foobar="left:0%;" data-10p="left:50%;" data-30p="left:100%;"></div>

分别表示滚动条滚动视口的10% 和 30%

 absolute mode 和 relative mode 的offset前面都是能够放一个常量的，可是这个常量须要一个标识符使用的时候须要在这个标识符前面加下划线：

定义：skrollr.init({
    constants: {
        foobar: 1337
    }
});

调用：

<div data-_foobar="left:0%;" data-_foobar--100="left:50%;" data-_foobar-100="left:100%;"></div>

<!--Equal to-->

<div data-1337="left:0%;" data-1237="left:50%;" data-1437="left:100%;"></div>

 

添加Class

skrollr会自动html标签添加class"skrollr"而且会移除 class "no-skrollr"（若是存在的话）还会根据检测结果添加class "skrollr-desktop"或者"skrollr-mobile"以代表运行的平台

会给关键帧添加 class e "skrollable-before","skrollable-between" 或者"skrollable-after" skrollr会根据关键帧所在的位置肯定添加哪个

动态改变属性

从skrollr 0.6.24开始你能够skrollr改变属性值用法和css同样只须要在属性前面加上"@"符号：

<polygon
    points='426,720   -200,720   -200,0   955,0'
    data-0="@points:426,720   -200,720   -200,0   955,0"
    data-500="@points:380,720   -200,720   -200,0   1302,0">
</polygon>注意：每次改变属性里面的数字个数必须保持一致

自动补全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>

因此不要这样写，应该每次都写出改变了的css 属性

注意事项

  • 全部的数字值都须要单位0也不例外
  • 复合写法 margin:0px 0px 0px 0px;对应 margin:0px 100px 50px 3px; 可是不能对应 margin:10px;值的数量必须保持一致，不然会出错
  • css3 transform 里面的属性顺序必须一致 例如 rotate(0deg) translate(10px) 能够对应 rotate(0deg) translate(10px) 可是不能够写成 translate(10px) rotate(0deg)
  • 动态改变颜色不支持 名称（例如：red ，green）和 16进制色值（例如：#ff0）必须使用 rgb(),rgba(), hsl()或者 hsla()
  • 并且必须对应使用 不能第一个关键帧使用rgba()下一个就换成hsla()

参数options skrollr.init([options])

smoothScrolling=true在滚动条中止的时候动画不会当即中止，而是有一个过渡，这个过渡时间用smoothScrollingDuration来设定在元素上能够经过设置data-smooth-scrolling属性为on或者off来肯定当前元素是否执行此缓动

代码：

<div style="line-height:30px;font-size:20px;background:#ccc;" data-0="background:rgb(253,246,232);transform:rotate(0deg);" data-500="background:rgb(246,135,242);transform:rotate(360deg);" data-smooth-scrolling='off'><div>

<script type="text/javascript">
            skrollr.init({
        forceHeight: false,
        smoothScrolling:true,
        smoothScrollingDuration:500,
        easing: {
            vibrate: function(p) {
                return Math.sin(p * 10 * Math.PI);
            }
        }
    });

constants={}

<script type="text/javascript">
            skrollr.init({
        forceHeight: false,
        smoothScrolling:true,
        smoothScrollingDuration:500,
        easing: {
            vibrate: function(p) {
                return Math.sin(p * 10 * Math.PI);
            }
        }

　　constants:{

　　　　myconst:300

　　}
    });

<div data-_myconst></div> 至关于 <div data-_300></div>

<div data-_myconst-200></div>至关于<div data-500></div>

<div data-_myconst-top></div>至关于<div data-300-top></div>

注意使用的时候要在常量标识符以前加下划线

 

scale=1

比例尺（这个没看太懂）貌似就是说文档默认是使用最大的关键帧来肯定文档高度，文档高度加上视口高度是默认的最大高度，skrollr会尽量的滚动上去，若是你的animation过快或者过慢能够调整这个值，若是设置了forceHeight=false这个值将会被忽略，scale也会影响constants可是scale只会在absolute mode中起做用

forceHeight=true

当你设置了data-1200而视口的滚动到文档底部尚未达到这个值的时候，会继续向下滚，设置了forceHeight=false就能够阻止它继续滚动

mobileCheck=function() {...}

这个参数是能够本身定义一个检测移动端的检测函数来覆盖默认的检测函数：

function() {
    return (/Android|iPhone|iPad|iPod|BlackBerry/i).test(navigator.userAgent || navigator.vendor || window.opera);
}

mobileDeceleration=0.004 

惯性参数，在移动端滑动，抬起手指以后加速或减速1表示不使用惯性

edgeStrategy='set'

定义滚动条超过所定义的关键帧范围以外的时候元素的状态默认值是set，可能的值set，ease，reset，set和ease相似都会保持第一帧或者最后一帧的状态，只不过ease会根据easing里面定义的函数变化，reset会使元素的状态回到最初定义的（注意：并非第一个关键帧）

skrollrBody='skrollr-body'

 beforerender 和 render

每一次渲染以前或以后调用的函数

eg. skrollr.init({
    render: function(data) {
        //Log the current scroll position.
        console.log(data.curTop);
    }
});

两个函数一个在渲染以前调用，一个在渲染以后调用，所需参数是一个对象，格式以下：

{
    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
}

beforerender若是返回值是false的话，就会阻止渲染

    var param={
        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
    }
        skrollr.init({
        constants:{
            myconst:300
        },
        render:function(param){
            console.log(param.maxTop)
            console.log(document.body.offsetHeight)
        
    });}

 

keyframe（没看明白）

 easing

运动曲线，定义新的或者覆盖原有的曲线：

  • linear: default 线性.
  • quadratic: To the power of two. So 50% looks like 25%.
  • cubic: To the power of three. So 50% looks like 12.5%
  • begin/end: They always return 0 or 1 respectively. No animation.
  • swing: Slow at the beginning and accelerates at the end. So 25% -> 14.6%, 50% -> 50%, 75% -> 85.3%
  • sqrt: Square root. Starts fast, slows down at the end.
  • outCubic
  • bounce: Bounces like a ball. See https://www.desmos.com/calculator/tbr20s8vd2 for a graphical representation.

skrollr.init({
    easing: {
        //This easing will sure drive you crazy
        wtf: Math.random,
        inverted: function(p) {
            return 1 - p;
        }
    }
});

skrollr.get()

返回skrollr对象

refresh([elements])

刷新能够传入dom对象 ，Array, NodeList 或者jquery对象。不传入参数表示刷新全部

getScrollTop()

获取当前的scrollTop

getMaxScrollTop()

获取最大scrollTop

setScrollTop(top[, force = false])

设置当前scrollTop

若是force=true那么会直接无动画的到达设置的scrollTop默认是有动画的

isMobile()

返回是否运行在移动端

 

--------------------------------------------------待续待续待续待续待续--------------------------------------------------------------

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程