实现一个简单的视差动画 skrollr.js

刚刚看了腾讯ecd上的一篇文章 叫《滚动视差设计指南》链接如下：

http://ecd.tencent.com/%E6%BB%9A%E5%8A%A8%E8%A7%86%E5%B7%AE%E8%AE%BE%E8%AE%A1%E6%8C%87%E5%8D%97.html

但是没有找到《滚动视差制作指南》   

在国内类似的网站也少有耳闻     由于本人对这中有意思的技术很感兴趣  前段时间也写过一个小例子 没有写完  拿出来个大家分享一下

要模仿的网站： http://everylastdrop.co.uk/

var every="http://everylastdrop.co.uk/ "

看到every这个网站本人感觉很有意思  就研究了一下   把every用到的js文件挨个百度了一下  所以发现了skrollr.js这个插件

也试着模仿了一下  很好用

skrollr.js   https://github.com/Prinzhorn/skrollr

首先:需要引入的外部文件

jquery.js   skrollr.js    skrollr.css  

然后为了方便测试  我设置了一下div的宽和高

div {
		width:100%;
		height:100%;
	}

然后在页面尾部做下最简单初始化工作  

<script type="text/javascript">
	skrollr.init();
</script>

第一个例子来了 

<div 
	data-1000="top:0%"
	data-2000="top:30%"
	data-3000="top:100%">
	哈哈哈  我可以在页面上滚动
</div>

预览一下看看  

以上很好理解  大概意思就是  

滚动条在1000个像素以及1000之前的时候  div距离页面顶部0%

在2000的时候距离页面顶部30%  就造成了滚动效果乡下滚动效果