重力感应H5

发表于   |   分类于

这两天做了一个新的H5项目，项目其中有一个难点是实现重力感应功能。之前没有做过类似的项目，所以设计师发了一个案例给我参考。如图，带有立体感的纸张等元素都会随着手机的摇晃而动：

查看了源码，了解到了一个很实用的插件parallax.js，github地址：https://github.com/wagerfield/parallax

这是一个简单的，轻量级的的视差引擎，能够对智能设备的方向作出反应。在没有没有陀螺仪或运动检测硬件可用的时候，使用光标的位置来代替。简单的说就是：使用它手机上可以根据手机硬件中的陀螺仪或运动监测硬件来实现重力感应效果，如果不是在手机上，那么它可以根据你鼠标光标的移动来模拟重力感应效果。

另外，这个插件还可以产生3D的感觉，如果物体离你近，那么重力感应的产生效果越明显，物体离你越远，重力感应产生的效果越不明显，你只需要给每个物体设置不同的深度，即data-depth，取值是0-1之间，0则表示完全静止，1则表示动静最大。

使用parallax.js这个插件很简单，首先写好结构：

1
2
3
4
5
<ul id="scene1">
  <li class="layer" data-depth="0.00"><img src="layer6.png"></li>
  <li class="layer" data-depth="0.20"><img src="layer5.png"></li>
  <li class="layer" data-depth="0.40"><img src="layer4.png"></li>
</ul>

然后调用js并初始化设置视差（scene1的名字可以随意）：

1
2
3
4
5
<script src="js/parallax.min.js"></script>
<script>
  var scene1 = document.getElementById('scene1');
  var parallax = new Parallax(scene1);
</script>

如果有多个地方要调用，写好html结构后，就定义多个Parallax：

1
2
3
4
5
6
7
8
9
<script src="js/parallax.min.js"></script>
<script>
  var scene1 = document.getElementById('scene1');
  var scene2 = document.getElementById('scene2');
  var scene3 = document.getElementById('scene3');
  var parallax = new Parallax(scene2);
  var parallax = new Parallax(scene1);
  var parallax = new Parallax(scene3);
</script>
—— end —— 注：水平有限，难免有误，如有错误欢迎指出！