skrollr 中文教程

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>

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

时间: 2024-10-23 11:37:51

skrollr 中文教程的相关文章

iOS App上架发布到app store市场最新中文教程

iOS -App发布Appstore最新中文教程 这个教程教你怎么把开发好的ios应用上架到appstore市场,一步一步带截图,包括最新的appstore后台系统itunesconnect使用,证书创建和管理,应用id创建和管理,上传ipa等都将一步一步详细介绍. 下面从七个步骤进行详细介绍! 1.创建唯一标示符App IDs 2.申请发布证书 3.申请发布描述文件 4.到iTunes Connect创建App并填写信息 5.Windows下选择证书编译打包 6.Windows下上传IPA到A

struts2官方 中文教程 系列十一:使用XML进行表单验证

在本教程中,我们将讨论如何使用Struts 2的XML验证方法来验证表单字段中用户的输入.在前面的教程中,我们讨论了在Action类中使用validate方法验证用户的输入.使用单独的XML验证文件让您可以内置到Struts 2框架的验证器. 贴个本帖的地址,以免被爬:struts2官方 中文教程 系列十一:使用XML进行表单验证  即 http://www.cnblogs.com/linghaoxinpian/p/6938720.html 下载本章节代码 为了使用户能够编辑存储在Person对

struts2官方 中文教程 系列九:Debugging Struts

介绍 在Struts 2 web应用程序的开发过程中,您可能希望查看由Struts 2框架管理的信息.本教程将介绍两种工具,您可以使用它们来查看.一个工具是Struts 2的配置插件,另一个是调试拦截器.本文还讨论了如何设置日志级别以查看更多或更少的日志消息. 贴个本帖的地址,以免被爬:struts2官方 中文教程 系列九:Debugging Struts 即 http://www.cnblogs.com/linghaoxinpian/p/6916619.html 下载本章节代码 Configu

struts2官方 中文教程 系列七:消息资源文件

介绍 在本教程中,我们将探索使用Struts 2消息资源功能(也称为 resource bundles 资源绑定).消息资源提供了一种简单的方法,可以将文本放在一个视图页面中,通过应用程序,创建表单字段标签,并根据用户的语言环境将文本更改为特定的语言. 贴个本帖的地址,以免被爬:struts2官方 中文教程 系列七:消息资源文件  即 http://www.cnblogs.com/linghaoxinpian/p/6906720.html 下载本章节代码 信息资源属性文件 在Struts2 we

DotCMS中文教程

CMS全称Content Management System,内容管理系统,内容可以包含咨询.博客.介绍等,主要用于网络建站,可以作为企业门户网站.新闻网站.博客站点等,甚至可以集成电子商务功能,随着这两年移动互联网的发展,也出现了越来越多的微网站,那么CMS不仅仅要求能在PC网站上使用,同时也要求在移动互联网上使用. CMS系统好处不在多说,那么怎么拥有这么一套通用的系统呢,答案1:你可以自己开发出来一套,当然前提是你有时间和成本,答案2:你可以买一套系统,当前国内CMS系统价格在2000以上

Swift中文教程(五)--对象和类

原文:Swift中文教程(五)--对象和类 Class 类 在Swift中可以用class关键字后跟类名创建一个类.在类里,一个属性的声明写法同一个常量或变量的声明写法一样,除非这个属性是在类的上下文里面,否则,方法和函数的写法也是这样: 1 class Shape { 2 var numberOfSides = 0 3 func simpleDescription() -> String { 4 return "A shape with \(numberOfSides) sides.&q

Apple Swift编程语言入门中文教程

Apple Swift编程语言入门教程 目录 1   简介 2   Swift入门 3   简单值 4   控制流 5   函数与闭包 6   对象与类 7   枚举与结构 1   简介 今天凌晨Apple刚刚发布了Swift编程语言,本文从其发布的书籍<The Swift Programming Language>中摘录和提取而成.希望对各位的iOS&OSX开发有所帮助. Swift是供iOS和OS X应用编程的新编程语言,基于C和Objective-C,而却没有C的一些兼容约束.S

struts2官方 中文教程 系列十二:控制标签

介绍 struts2有一些控制语句的标签,本教程中我们将讨论如何使用 if 和iterator 标签.更多的控制标签可以参见 tags reference. 到此我们新建一个struts2 web 项目:struts_basic2 本帖地址:struts2官方 中文教程 系列十二:控制标签 即 http://www.cnblogs.com/linghaoxinpian/p/6941683.html 下载本章节代码 struts2 if标签 我们在thankyou.jsp中添加如下代码: <s:i

webstorm的中文教程和技巧分享

webstorm是一款前端javascript开发编辑的神器,此文介绍webstorm的中文教程和技巧分享. webstorm8.0.3中文汉化版下载:百度网盘下载:http://pan.baidu.com/s/1pJI9PMV WebStorm为前端javascript开发而生,专门为 javascript开发做了很多优化,令前端工程师眼前一亮的. 一.webstorm的功能 1.webstorm的智能的代码补全: 支持不同浏览器的提示,还包括所有用户自定义的函数(项目中) 代码补全包含了所有