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可能会创建出来不符合你想法的过渡动画。