skrollr:超强的视差滚动插件

字数 254阅读 5583

推荐指数:★★★★★
使用难度:★★☆
适用范围:炫酷的个人简介,或者结合你的创意应用于各种场合
GitHub数据


可能有的朋友还不太清楚什么是“视差滚动”,简单来说就是将页面的动态效果和鼠标滚轮的滚动结合起来,让用户在滚动滚轮的过程中看到丰富多彩炫酷多变的页面效果。


这个插件是我觉得比较好用的一个,和前面介绍过的impress.js使用方法比较像,用起来比较简单。Star数对得起它的功能。

不得不提的是,它居然兼容低版本IE。。。


一句话讲解原理:通过在标签属性中进行设置来控制动画效果。
效果截图



大家最好自己打开Demo看看,非常炫酷!


缺点


上手有一定难度,不过只要用心还是很容易学会的。


一段代码教程

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

data-0和data-500是开始和结束的位置,可以看到分别设置了两个背景颜色。skrollr可以自动帮你实现两个颜色的过渡,非常智能。


skrollr地址

欢迎扫描二维码关注我的微信号“GitHub不完全装B指南”,获取最新文章。

谢谢~

推荐阅读更多精彩内容