www.zady.com/comingsoon
skrollr——兼容性超强的视差滚动js插件
零、前言
我忘了第一次见到视差滚动的页面是什么时候，但是当时的感觉我到现在都忘不了。
“原来网页还可以这么设计！”
一、skrollr介绍
skrollr是一个开源的视差滚动js插件，兼容性极强，可以兼容各种浏览器（包括IE）以及手机端（IOS/Android），基本上没有兼容不了的。
skrollr自身体积只有8k，加上兼容ie和手机端的插件也不到30k，对于一个展示用页面来说这个体积确实不大了。
二、skrollr用法简介
先来看一个skrollr的官方Demo吧。
怎么样，是不是很厉害？
下面我翻译一下官方的三个小例子，大家可以感受一下。我强烈推荐你去skrollr的github主页自己看看，相信我，你的英语足够用。
1、目标：滚动条在最上方时，让div的background-color为#00f；当滚动条滚动到500px时div的background-color变化为#f00；
代码：
<div data-0="background-color:rgb(0,0,255);" data-500="background-color:rgb(255,0,0);">WOOOT</div>
看出来怎么用了吗？设置元素的“data-开始位置”和“data-结束位置”的值即可，skrollr会自动处理颜色随滚动渐变效果。
2、目标：让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>
你可以定义任意多个效果，skrollr都可以让他们随着滚动变化。
3、目标：让div摇滚起来
代码：
<div data-0="background-color:rgb(0,0,255);transform[bounce]:rotate(0deg);" data-500="background-color:rgb(255,0,0);transform[bounce]:rotate(360deg);">WOOOT</div>
可以使用skrollr提供的一些easing函数，改变运动方式。
4、目标：使用相对位置而不是绝对位置
代码：
<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>
看到了吗，我们把“data-500”换成了“data-top”！skrollr不仅可以处理绝对位置，也可以处理相对位置！
关于相对位置的详细介绍请查看sskrollr的github主页。
好了，简单的教程到此结束，相信大家对skrollr已经有了一个初步的了解，剩下的，just do it by yourself！
三、注意事项
1、例子中只有两个“data-xxx”，但是你可以添加任意多的“data-xxx”，skrollr会自动创建之间的过渡动画。
2、两个“data-xxx”的值最好对应，比如 data-0="top:0%;left:0%;" data-500="top:10%;left:10%;" 而不是 data-0="left:0%;" data-500="top:10%;left:10%;" 如果缺项的话skrollr可能会创建出来不符合你想法的过渡动画。
样例网站：www.zady.com/comingsoon
参考资料：http://www.cnblogs.com/numbbbbb/archive/2013/06/02/3113959.html
