当前位置：首页 > skrollr中文教程 skrollr 0.6.29

skrollr中文教程 skrollr 0.6.29

发布于 2018-04-13 阅读 1947 次 移动端H5 Javascript HTML5

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

使用方法

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

  1. <script type="text/javascript" src="skrollr.min.js"></script>
  2.     <script type="text/javascript">
  3.     var s = skrollr.init();
  4.     </script>
  5. </body>

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

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

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

  1. skrollr.init({
  2.     forceHeight: false,
  3.         easing: {
  4.             vibrate: function(p) {
  5.                 return Math.sin(p * 10 * Math.PI);
  6.         }
  7.     }
  8. });

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

  1. <div style="line-height:30px;font-size:20px;background:#ccc;" data-0="transform:rotate(0deg);" data-500="transform:rotate(90deg);"></div>

测试了一下data-0属性里面的css属性必须带单位，否则不会出现中间的过渡动画

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

  1. <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为你处理所有这些讨厌的CSS前缀。

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

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

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

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

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

  1.  <div data-_foobar="left:0%;" data-10p="left:50%;" data-30p="left:100%;"></div>

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

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

定义：

  1. skrollr.init({
  2.     constants: {
  3.         foobar: 1337
  4.     }
  5. });

调用：

  1. <div data-_foobar="left:0%;" data-_foobar--100="left:50%;" data-_foobar-100="left:100%;"></div>
  1. <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一样只需要在属性前面加上”@”符号：

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

自动补全css属性

  1. <div data-100="left:0%;" data-200="top:0%;" data-300="left:50%;" data-400="top:50%;"></div>

相当于

  1. <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来确定当前元素是否执行此缓动

代码：

  1. <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>
  3. <script type="text/javascript">
  4.             skrollr.init({
  5.         forceHeight: false,
  6.         smoothScrolling:true,
  7.         smoothScrollingDuration:500,
  8.         easing: {
  9.             vibrate: function(p) {
  10.                 return Math.sin(p * 10 * Math.PI);
  11.             }
  12.         }
  13.     });
  15. constants={}
  16. <script type="text/javascript">
  17.     skrollr.init({
  18.         forceHeight: false,
  19.         smoothScrolling:true,
  20.         smoothScrollingDuration:500,
  21.         easing: {
  22.             vibrate: function(p) {
  23.                 return Math.sin(p * 10 * Math.PI);
  24.             }
  25.         },
  26.         constants:{
  27.         myconst:300}
  28.     });
  29. </script>

<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() {…}
这个参数是可以自己定义一个检测移动端的检测函数来覆盖默认的检测函数：

  1. function() {
  2.     return (/Android|iPhone|iPad|iPod|BlackBerry/i).test(navigator.userAgent || navigator.vendor || window.opera);
  3. }
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的话，就会阻止渲染

  1. var param={
  2.     curTop: 10, //the current scroll top offset
  3.     lastTop: 0, //the top value of last time
  4.     maxTop: 100, //the max value you can scroll to. curTop/maxTop will give you the current progress.
  5.     direction: 'down' //either up or down
  6. }
  7.     skrollr.init({
  8.     constants:{
  9.         myconst:300
  10.     },
  11.     render:function(param){
  12.         console.log(param.maxTop)
  13.         console.log(document.body.offsetHeight)
  14. });}

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备2020048062号-1
Copyright © w2le.com, All Rights Reserved