实现一个简单的视差动画 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%;
	}

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

第一个例子来了 

	哈哈哈  我可以在页面上滚动

预览一下看看  

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

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

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

3000同上   并且3000以后的样式也保持3000时候的样式

然后在添加点内容  比如说背景颜色   

	哈哈哈  我可以在页面上滚动

哈哈  我感觉自己瞬间变得万能了 

然后删掉之前的代码    开始模仿every这个网站

效果图

上面部分的颜色随着滚轮的滚动而变化    就好像从黑天到白天一样 

然后  (ps:下面用到的两个图片在every网站里面都能找的到  一个是星星一个是太阳)

发现了什么  不好使有没有 ！！！   我也不知道为什么  every网站里的这么写就没有问题。。。

最终我得出的结论就是只能有两级嵌套   否则到了第三级嵌套就不好使了    就像上面的img一样

所以我把代码改成了下面这样

把里应该是父子关系的三个元素改成了兄弟关系。。。

这样做不仅仅是不道德   而且对显示也有影响  

比如说太阳应该是在内层div里出现的  结果现在是从屏幕下面滚出来的

效果图  

这就有点不太和谐了   如果有朋友知道怎么解决希望能指点一下

然后的代码就是照葫芦画瓢了   只要计算好出现的时机并多测试就没问题了  

最终效果   没完成 只写了第一个场景 

代码

那位朋友如果知道类似的插件或者教程神马的   请多多推荐

本人文字表达能力不是特别好  表达的不清楚的地方多多原谅