文档介绍：: .
动效与！
这里提供一个工具可以轻松实现陀螺仪重力效果的：
用法简单，定义一个 parallax-obj 的父类，把需要动的元素加上 layer 的类，
然后设置动的范围 data-depth：
(5) 背景音乐&音效
H5 页面要炫酷，画面生动还是不够的，一定要配合生动的音乐。因此可以主动跟
设计或产品沟通，让他们可以提供音乐资源，分分钟导致 UV 猛涨有木有！当然，有了音乐，前端也不是直接引用的，还是有点要求：
，30s 为佳，而且音乐要加上渐现渐隐效果，方便循环播放;
，音质和流量，在手机上还是优先考虑流量吧。
一般背景音乐体积可以接受的范围是 200K 以下，若太大，可以使用格式工厂等
软件，降低它的比特率和声道来改变体积。
接着，只需要简单引用：
这里有个问题，IOS 是不能自动播放音乐的，一定要触发一个用户交互事件，例
如点击。
但是有一种 hack 的方法可以让 IOS 微信侧页面自动播放(SAFARI 依旧无效)：
通过 new 一张图片，监听一张图片的 onload 事件，结束后回调执行音频播放
()即可，原理估计是动了 dom 结构，相当于执行了一次交互。(有人也用
过 createEvent 模拟，原理也是动了 dom。)
因此，记得暴露一个音乐关闭/打开的按钮，不然肯定被用户骂死。
(6)有趣的 loading
Loading 页还是要有的，万一用户网速慢呢？
以上做了那么多事，如果没有资源加载都是玩不来的，因此还需要一个 loading
的支持。一般情况下页面体积大于 3m 则要加上 loading 页。
然而 loading 还是可以做得很有趣的，一般的做法是：
，例如 APP 宣传页;
，放一个贱贱的人物跳舞给你看;
，用 CSS3 简单动画。
这是空间 预约页第二版，使用了以上的若干方法论，例如 loading 动画，CSS3
动画，SVG 星空连线，首屏星球重力感应，音乐(这里使用开启按钮后播放)等等。(由于活动已结束，很多运营处都被删掉从简了，忽略那些细节)
(查看 DEMO)
当然，真正要做到高效制作动态 H5 页面，还是靠积累，因此平时做好的细节动
画自己都积累起来，下次分分钟就能用得上。
二、优化
前面说的是让页面动起来的一些小技巧。
而页面动起来的根基是功能可用的页面，因此有必要分享一些优化细节的技巧和
方向，熟悉掌握一些方法论还是会对页面开发大大提高效率的，并且也能防止疏忽缺
漏。
(1) 动画雪碧图涉及的动画十分多，用的元素也十分多，请务必使用雪碧图(Sprite)！
网上的工具有一些可以帮助你生成雪碧图的工具，例如 CssGaga，GoPng 等等，
自动化构建工具 Grunt 和 Gulp 也提供了相应插件。
特别地，如果单张雪碧图面积实在太大，可以拆分雪碧图，例如拆分成 2-4 张，
因为现代浏览器都支持 4-6 个同源请求下载，若资源实在太多，也可以考虑把静态资
源放在不同源域名下去请求，这里牺牲多几个请求换来图片同时加载比一张图片