基于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实现的windows8开机加载动画
Dec 09 HTML / CSS
CSS3制作气泡对话框的实例教程
May 10 HTML / CSS
CSS3 实现时间轴动画
Nov 25 HTML / CSS
HTML5对手机页面长按会粘贴复制禁用的解决方法
Jul 19 HTML / CSS
html5中为audio标签增加停止按钮动作实现方法
Jan 04 HTML / CSS
html5 canvas-2.用canvas制作一个猜字母的小游戏
Jan 07 HTML / CSS
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
Jan 30 HTML / CSS
CSS 还能这样玩?奇思妙想渐变的艺术
Apr 27 HTML / CSS
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
Jul 01 HTML / CSS
能用CSS实现的就不要麻烦JavaScript了
Oct 05 HTML / CSS
在HTML中引入CSS的几种方式介绍
Dec 06 HTML / CSS
HTML静态页面获取url参数和UserAgent的实现
Aug 05 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和mysql中uft-8中文编码乱码的几种解决办法
2012/04/19 PHP
解析PHP中的unset究竟会不会释放内存
2013/07/18 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
PHP根据key删除数组中指定的元素
2019/02/28 PHP
使用PHP反射机制来构造&quot;CREATE TABLE&quot;的sql语句
2019/03/21 PHP
PHP序列化和反序列化深度剖析实例讲解
2020/12/29 PHP
Z-Blog中用到的js代码
2007/03/15 Javascript
JavaScript CSS修改学习第六章 拖拽
2010/02/19 Javascript
javascript instanceof,typeof的区别
2010/03/24 Javascript
js中关于String对象的replace使用详解
2011/05/24 Javascript
在Ubuntu系统上安装Node.JS的教程
2015/10/15 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
2015/12/13 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
2016/05/17 Javascript
深入理解ECMAScript的几个关键语句
2016/06/01 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
2016/07/11 Javascript
JavaScript实战之带收放动画效果的导航菜单
2016/08/16 Javascript
js实现碰撞检测特效代码分享
2016/10/16 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
2016/12/17 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
2018/01/31 jQuery
vue中的provide/inject的学习使用
2018/05/09 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
2018/09/28 Javascript
React父子组件间的传值的方法
2018/11/13 Javascript
微信小程序之swiper滑动面板用法示例
2018/12/04 Javascript
Google开源的Python格式化工具YAPF的安装和使用教程
2016/05/31 Python
python代码实现ID3决策树算法
2017/12/20 Python
Python爬虫常用库的安装及其环境配置
2018/09/19 Python
Python面向对象程序设计示例小结
2019/01/30 Python
Django 查询数据库并返回页面的例子
2019/08/12 Python
pytorch实现特殊的Module--Sqeuential三种写法
2020/01/15 Python
某IT外企面试题-二分法求方程!看看大家的C++功底
2015/07/04 面试题
C#软件工程师英语面试题
2015/06/07 面试题
个人培训自我鉴定
2014/03/28 职场文书
乡镇交通安全实施方案
2014/03/29 职场文书
教师节表彰会主持词
2015/07/06 职场文书
创业开店,这样方式更合理
2019/08/26 职场文书
完美解决golang go get私有仓库的问题
2021/05/05 Golang