skrollr 0.6.29

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

 

使用方法

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

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

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

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

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禁止的颜色也是有效果的）

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

 

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

skrollr 中文教程

标签：

原文地址：http://www.cnblogs.com/youzhuxiaoyao/p/4502886.html

Tags：

很赞哦！ ()