基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例


Posted in HTML / CSS onJuly 31, 2017

最近用ofo小黄车App的时候,发现以前下方扫一扫变成了一个眼睛动的小黄人,觉得蛮有意思的,这里用HTML5仿一下效果。

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首页眼睛移动效果的示例

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>Document</title>
  <style>
    #box{
      position: relative;
      width: 300px;
      margin: 0 auto;
    }

    #face{
      background-image: url(images/face.png);
      background-size: cover;
      width: 300px;
      height: 300px;
      position: absolute;
    }

    #eyeLeft{
      background-image: url(images/eye.png);
      background-size: cover;
      width: 40px;
      height: 40px;
      position: absolute;
      top: 90px;
      left: 100px;
    }

    #eyeRight{
      background-image: url(images/eye.png);
      background-size: cover;
      width: 40px;
      height: 40px;
      position: absolute;
      top: 90px;
      left: 190px;
    }

    #glass{
      background-image: url(images/glass.png);
      background-size: cover;
      width: 300px;
      height: 300px;
      position: absolute;
    }
  </style>
</head>
<body>
  <div id="box">
    <div id="face"></div>
    <div id="eyeLeft"></div>
    <div id="eyeRight"></div>
    <div id="glass"></div>
    <div id="log"></div>
  </div>
<script>
'use strict';

/*
* author: 王乐平
* date:2017.7.17
*/

var eyeLeftPosition = {
  start: [70, 78],
  end: [100, 110]
};

var eyeRightPosition = {
  start: [150, 78],
  end: [190, 110]
};

var eyeLeftCenterPosition = {
  x: (eyeLeftPosition.end[0] - eyeLeftPosition.start[0]) / 2 + eyeLeftPosition.start[0],
  y: (eyeLeftPosition.end[1] - eyeLeftPosition.start[1]) / 2 + eyeLeftPosition.start[1]
};

var eyeRightCenterPosition = {
  x: (eyeRightPosition.end[0] - eyeRightPosition.start[0]) / 2 + eyeRightPosition.start[0],
  y: (eyeRightPosition.end[1] - eyeRightPosition.start[1]) / 2 + eyeRightPosition.start[1]
};

var r = 20;

var eyeLeft = document.querySelector('#eyeLeft');
var eyeRight = document.querySelector('#eyeRight');

if (window.DeviceOrientationEvent) {

  window.addEventListener('deviceorientation', function (event) {

    let {alpha, beta, gamma} = event;

    eyeLeft.style.left = eyeLeftCenterPosition.x + gamma / 90 * r + 'px';
    eyeRight.style.left = eyeRightCenterPosition.x + gamma / 90 * r + 'px';
    eyeLeft.style.top = eyeRight.style.top 
                      = eyeLeftCenterPosition.y + beta / 180 * r + 'px';

    eyeRight.style.transform = eyeLeft.style.transform 
                         = eyeRight.style.WebkitTransform 
                         = eyeLeft.style.WebkitTransform 
                         = 'rotate(' + beta + 'deg)';
  }, false);
} else {
  document.querySelector('body').innerHTML = '浏览器不支持DeviceOrientationEvent';
}
</script>
</body>
</html>

最终效果

 

基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例

 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
Oct 15 HTML / CSS
CSS3 实现的缩略图悬停效果
Dec 09 HTML / CSS
使用html2canvas实现浏览器截图的示例代码
Jan 26 HTML / CSS
html5 canvas 画图教程案例分析
Nov 23 HTML / CSS
HTML5新增的Css选择器、伪类介绍
Aug 07 HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
Feb 19 HTML / CSS
HTML5实现可缩放时钟代码
Aug 28 HTML / CSS
HTML5打开手机扫码功能及优缺点
Nov 27 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
Oct 08 HTML / CSS
HTML5自定义视频播放器源码
Jan 06 HTML / CSS
CSS3实现的3D隧道效果
Apr 27 HTML / CSS
CSS filter 有什么神奇用途
May 25 HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
Jul 28 #HTML / CSS
H5 canvas实现贪吃蛇小游戏
Jul 28 #HTML / CSS
LocalStorage记住用户和密码功能
Jul 24 #HTML / CSS
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
Jul 24 #HTML / CSS
H5调用相机拍照并压缩图片的实例代码
Jul 20 #HTML / CSS
h5实现获取用户地理定位的实例代码
Jul 17 #HTML / CSS
HTML5 表单验证失败的提示语问题
Jul 13 #HTML / CSS
You might like
PHP的构造方法,析构方法和this关键字详细介绍
2013/10/22 PHP
thinkphp验证码的实现(form、ajax实现验证)
2016/07/28 PHP
JavaScript触发器详解
2007/03/10 Javascript
firefox插件Firebug的使用教程
2010/01/02 Javascript
网站404页面3秒后跳到首页的实例代码
2013/08/16 Javascript
jquery.ui.draggable中文文档(原文翻译)
2013/11/15 Javascript
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
2014/06/05 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
2016/12/20 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
2017/11/28 Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
2018/02/23 Javascript
JavaScript面试出现频繁的一些易错点整理
2018/03/29 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
Vue+Express实现登录状态权限验证的示例代码
2019/05/05 Javascript
js中比较两个对象是否相同的方法示例
2019/09/02 Javascript
vue实现评论列表功能
2019/10/25 Javascript
js实现简单抽奖功能
2020/11/24 Javascript
vue内置组件keep-alive事件动态缓存实例
2020/10/30 Javascript
JS使用setInterval计时器实现挑战10秒
2020/11/08 Javascript
javascript实现滚轮轮播图片
2020/12/13 Javascript
Python中的字典遍历备忘
2015/01/17 Python
探究Python中isalnum()方法的使用
2015/05/18 Python
Python 实现网页自动截图的示例讲解
2018/05/17 Python
Python中的 enum 模块源码详析
2019/01/09 Python
从0开始的Python学习014面向对象编程(推荐)
2019/04/02 Python
python抓取多种类型的页面方法实例
2019/11/20 Python
TensorFlow tf.nn.max_pool实现池化操作方式
2020/01/04 Python
台湾家适得:Homeget
2019/02/11 全球购物
Linux常见面试题
2013/03/18 面试题
个人简历的自荐信
2013/10/23 职场文书
医院党员公开承诺书
2014/08/30 职场文书
个人对照检查剖析材料
2014/10/13 职场文书
2014年度考核工作总结
2014/12/24 职场文书
Python使用永中文档转换服务
2022/05/06 Python