基于HTML5陀螺仪实现ofo首页眼睛移动效果
生活随笔
收集整理的這篇文章主要介紹了
基于HTML5陀螺仪实现ofo首页眼睛移动效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
最近用ofo小黃車App的時候，發現以前下方掃一掃變成了一個眼睛動的小黃人，覺得蠻有意思的，這里用HTML5仿一下效果。
ofo眼睛效果
效果分析
從效果中不難看出，是使用陀螺儀事件實現的。
這里先來看一下HTML5中陀螺儀事件的一些概念。
陀螺儀事件為deviceorientation，這里主要獲取事件中的alpha,beta,gamma。
aplha
行動裝置水平放置時，繞 Z 軸旋轉的角度，數值為 0 度到 360 度。
beta
行動裝置水平放置時，繞 X 軸旋轉的角度，數值為 -180 度到 180 度。
gamma
行動裝置水平放置時，繞 Y 軸旋轉的角度，數值為 -90 度到 90 度。
這里，只需要用到beta和gamma。
將apk解壓，得到眼睛素材：
代碼實現
<!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: 王樂平 * blog: http://blog.csdn.net/lecepin * 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>最終效果
博客名稱：王樂平博客
CSDN博客地址：http://blog.csdn.net/lecepin
更多專業前端知識，請上 【猿2048】www.mk2048.com
總結
以上是生活随笔為你收集整理的基于HTML5陀螺仪实现ofo首页眼睛移动效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 纯CSS3文字Loading动画特效
- 下一篇： 移动设备HTML5页面布局