基于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实现背景模糊的三种方式
Mar 09 HTML / CSS
CSS3中的注音对齐属性ruby-align用法指南
Jul 01 HTML / CSS
详解CSS3 弹性布局快速入门
Jun 06 HTML / CSS
html5 web本地存储将取代我们的cookie
Dec 26 HTML / CSS
html5构建触屏网站之touch事件介绍
Jan 07 HTML / CSS
几个解决兼容IE6\7\8不支持html5标签的几个方法
Jan 07 HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
Jan 09 HTML / CSS
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
Jan 11 HTML / CSS
详解html5 canvas常用api总结(二)--绘图API
Dec 14 HTML / CSS
localstorage和sessionstorage使用记录(推荐)
May 23 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
Oct 11 HTML / CSS
localStorage的过期时间设置的方法详解
Nov 26 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基础知识:类与对象(5) static
2006/12/13 PHP
测试php函数的方法
2013/11/13 PHP
thinkphp的CURD和查询方式介绍
2013/12/19 PHP
PHP向浏览器输出内容的4个函数总结
2014/11/17 PHP
php使用socket调用http和smtp协议实例小结
2019/07/26 PHP
看了就知道什么是JSON
2007/12/09 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
2013/05/30 Javascript
js简单实现标签云效果实例
2015/08/06 Javascript
Vue 进阶教程之v-model详解
2017/05/06 Javascript
angular4模块中给标签添加背景图的实现方法
2017/09/15 Javascript
js实现关闭网页出现是否离开提示
2017/12/07 Javascript
详解vue-cli中模拟数据的两种方法
2018/07/03 Javascript
ES6 Promise对象概念及用法实例详解
2019/10/15 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
2020/04/27 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
jquery+ajax实现异步上传文件显示进度条
2020/08/17 jQuery
vue 导航守卫和axios拦截器有哪些区别
2020/12/19 Vue.js
[45:38]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第一局
2016/03/02 DOTA
利用Python批量生成任意尺寸的图片
2016/08/29 Python
Python检查ping终端的方法
2019/01/26 Python
PyQt5实现让QScrollArea支持鼠标拖动的操作方法
2019/06/19 Python
python实现比对美团接口返回数据和本地mongo数据是否一致示例
2019/08/09 Python
Python模拟登入的N种方式(建议收藏)
2020/05/31 Python
Python 如何创建一个简单的REST接口
2020/07/30 Python
PyQT5速成教程之Qt Designer介绍与入门
2020/11/02 Python
HTML5实现动画效果的方式汇总
2016/02/29 HTML / CSS
美国现代家具网站:Design Within Reach
2018/07/19 全球购物
美国儿童玩具、装扮和玩偶商店:Magic Cabin
2018/09/02 全球购物
澳大利亚领先的时尚内衣零售商:Bras N Things
2020/07/28 全球购物
幼儿园亲子活动方案
2014/01/29 职场文书
《雨点儿》教学反思
2014/04/14 职场文书
英语课前三分钟演讲稿(6篇)
2014/09/13 职场文书
省委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
2014年语文教学工作总结
2014/12/17 职场文书
实习报告范文
2019/07/30 职场文书
Win10本地连接不见了怎么恢复? win10系统电脑本地连接不见了解决方法
2023/01/09 数码科技