When I was using ofo’s yellow bike App recently, I found that the bottom scan turned into a minion with moving eyes, which was quite interesting. Here I use HTML5 to simulate the effect.

Ofo eye effect

Effect analysis

As you can see from the effect, the gyroscope event is used to achieve this.

Here’s a look at some concepts of gyroscopic events in HTML5.

The gyro event is Deviceorientation, where alpha,beta and gamma of the event are mainly obtained.

aplha

The Angle of rotation of the mobile device about the Z axis when placed horizontally ranges from 0 degrees to 360 degrees.

beta

The Angle of rotation of the mobile device about the X-axis when placed horizontally is -180 degrees to 180 degrees.

gamma

The Angle of rotation of the mobile device about the Z axis when placed horizontally is -90 degrees to 90 degrees.

Here, we only need beta and gamma.

Decompress APK to get eye material:

Code implementation

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; word-wrap: break-word! Important; "> <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'; / * * the author: le-ping wang * 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 = 'Browser does not support DeviceOrientationEvent'; } </script> </body> </html>Copy the code

The final result

Blog name: Wang Leping blog

CSDN blogs at blog.csdn.net/lecepin


Creative Commons Attribution – Non-commercial Use – No Deductive 4.0 International License