网页滚屏特效原理剖析

效果图

效果图

原理解析

1、首先确定是满屏，那么哪种方式能够是满屏呢，很显然，fixed布局可以满屏布局。posiiton:fixed;

2、然后就是每一屏100%宽度，依次从上往下排列。

3、那么这个布局如果完成的话，就可以在每一屏布局自己想要的UI了。

4、当滚动鼠标的时候，fixed容器属性top每次往上移动-100%。top:-100%;

5、监听鼠标滚轮向上向下事件，通过jquery.animate更改top值，就可以实现上下滚屏

原理图

主要代码

1、html代码截图

html源码

2、js源码截图

js源码截图

3、css代码不在贴出，代码太长，主要的布局是container采用fixed布局，其余的每一屏采用relative布局，然后依次从上往下开始排列各屏。