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

posted @ 2013-06-02 15:37 numbbbbb 阅读(...) 评论(...) 编辑 收藏