前提：

介于现在很多活动都使用了 类似全屏滚动效果 尤其在微信里面 我自己开发了一个快速构建 此类项目的控件 与市面上大部分控件不同的是此控件还支持元素的动画效果 并提供多种元素效果 基于 zepto.js 

功能清单:

1 快速实现页面全屏滚动效果。并提供多种翻页效果，兼容大部分 ios 和 android 系统。

2 支持在页面中添加多种动画元素效果 来实现淡入，滑入等效果。

3 支持配置音乐功能。

4 支持摇一摇接口功能。

组件核心代码原理：

1 页面滚动

  在移动页面上如果想使用滚动，如过没有任何动画效果，那么肯定大家首先想到的就是用滚动条来滚动，但这样的滚动比较单调，实现动画效果比较困难，于是就想出了利用 css3 和 div 的绝对定位来实现。

然后给每个 div 设置绝对定位样式

这样页面上的每个 div 都相当于一个页面 只不过重叠了而已，接下来就要利用 javascript 和 css 让这些页面可以滚动 (利用 touch 时间改变 div 的 transform 来实现滚动)

这里有几点说明一下：

1) 使用 translate3d 来替换 translateY 可以开启硬件加速 在渲染上会好一些。

2) 在执行下一页或者上一页时  可以给 div 添加 css3 动画来使其滚动带有一定的动画效果，组件提供 8 中翻页效果。

2 元素的淡入淡出：

元素入场的动画效果主要是利用 css3 来实现

该元素首先是隐藏的，在页面滑入视窗时将其显示，就会应用上 css3 设定的动画效果，延伸出来不仅 fadeIn 效果，许多效果都可以设定, 另外可以给元素添加 data-delay 属性来控制元素的执行顺序。

组件使用方法：

几种效果的预览：

相关文档和说明：

更详细的文档可以查看：http://lvming6816077.github.io/H5FullscreenPage/

后续会对这个组件增加一些新的功能 例如增加 canvas 涂抹元素和可拖拽元素等等，如果大家有好的建议也可以留言。