资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

基于HTML5陀螺仪如何实现实现ofo首页眼睛移动效果

这篇文章将为大家详细讲解有关基于HTML5陀螺仪如何实现实现ofo首页眼睛移动效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

创新互联自2013年起,先为西吉等服务建站,西吉等地企业,进行企业商务咨询服务。为西吉企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

ofo眼睛效果

基于HTML5陀螺仪如何实现实现ofo首页眼睛移动效果

效果分析

从效果中不难看出,是使用陀螺仪事件实现的。

这里先来看一下HTML5中陀螺仪事件的一些概念。

陀螺仪事件为deviceorientation,这里主要获取事件中的alpha,beta,gamma

aplha

行动装置水平放置时,绕 Z 轴旋转的角度,数值为 0 度到 360 度。

基于HTML5陀螺仪如何实现实现ofo首页眼睛移动效果

beta

行动装置水平放置时,绕 X 轴旋转的角度,数值为 -180 度到 180 度。

基于HTML5陀螺仪如何实现实现ofo首页眼睛移动效果

gamma

行动装置水平放置时,绕 Z 轴旋转的角度,数值为 -90 度到 90 度。

基于HTML5陀螺仪如何实现实现ofo首页眼睛移动效果

这里,只需要用到beta和gamma。

将apk解压,得到眼睛素材:

基于HTML5陀螺仪如何实现实现ofo首页眼睛移动效果

代码实现




  
  
  Document
  


  
    
    
    
            

最终效果

基于HTML5陀螺仪如何实现实现ofo首页眼睛移动效果

关于“基于HTML5陀螺仪如何实现实现ofo首页眼睛移动效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


文章题目:基于HTML5陀螺仪如何实现实现ofo首页眼睛移动效果
网址分享:http://www.cdkjz.cn/article/gisdgi.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220