skrollr 中文教程

 

我的博客搬家到https://www.w2le.com/了

 

skrollr 0.6.29

skrollr是一个单独的视差滚动的JavaScript库,移动端(Android,iOS,等)和pc都可以使用,压缩后大小仅仅不到12K

 

使用方法

首先你需要引入skrollr.min.js文件,然后在文档加载完成后调用init()函数


   

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

WOOOT

View in browser

默认情况下skrollr认为页面可以滚动到500px急即使你的页面长度不够500,如果想阻止这种情况发生只要使用forceHeight属性就可以默认是true,将其设为false就可以阻止:

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

最好不要使用#00f或者#0000ff,最好使用rgb或者hsl因为他们会导致不一样的动画效果,通常情况下hsl会更加酷炫。(这里美人也没看太懂,试了试16禁止的颜色也是有效果的)

"transform:rotate(0deg);" data-500="transform:rotate(90deg);">
测试了一下红色部分必须带单位,否则不会出现中间的过渡动画

现在让我们给上个例子添加旋转动画吧

WOOOT

View in browser

skrollr为你处理所有这些讨厌的CSS前缀。

skrollr允许非线性动画,你可以吧所谓的easing function放到属性后面的 方括号里面,还可以的通过easings 参数自定义运动函数:

WOOOT

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

>

View in browser

如果文档结构有变化需要调用 refresh() 函数

 

 absolute mode 和 relative mode 的offset也可是是百分比 写法是

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

 absolute mode 和 relative mode 的offset前面都是可以放一个常量的,但是这个常量需要一个标识符使用的时候需要在这个标识符前面加下划线:

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

调用:





 

添加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一样只需要在属性前面加上"@"符号:


    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">
注意:每次改变属性里面的数字个数必须保持一致

自动补全css属性

相当于

所以不要这样写,应该每次都写出改变了的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来确定当前元素是否执行此缓动

代码:

你可能感兴趣的:(skrollr 中文教程)