Recently, when I used the OFO Little Yellow Car APP, I found that the previous sweeping below became a little yellow man with eyes, and it felt quite interesting. Here I used HTML5 to imitate the effect.
ofo eye effect Effect analysisIt is not difficult to see from the effect that the gyroscope event is achieved.
Let's take a look at some concepts of the gyroscope event in HTML5.
The gyroscope event is deviceorientation , which mainly obtains alpha , beta , gamma in the event.
When the mobile device is placed horizontally, the angle of rotation around the Z axis is 0 degrees to 360 degrees.
betaWhen the mobile device is placed horizontally, the angle of rotation around the X-axis, the value is -180 degrees to 180 degrees.
gammaWhen the operation is placed horizontally, the angle of rotation around the Z axis is the value of -90 degrees to 90 degrees.
Here, you only need to use Beta and Gamma.
Unzip the APK and get the eye material:
Code implementation <! 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 {positive: related: 300px; Margin: 0 AUTO;} #Face {background-image: URL (Images/FACE.P ng); Background-siZe : COVER; Width: 300px; Height: 300px; Position: AbSolute;} #eyelect {Background-Image: URL (Images/Eye.png); background-siZe: Cover; w IDth: 40px; height: 40px; posity: absolute; TOP: 90px; left: 100px;} #eyeright {background-images: url (images/eye.png); background-siZe: Cover; 40px; 40px; POSI Tion: absolute; Top: 90px; left: 190px ;} #glass {background-images: url (images/glass.png); background-siZe: Cover; width: 300px; height: 300px; posity: absolute;} </s. Tyle> </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: Wang Leping* Date: 2017.7.17*/VAR EYELEFTPOSITION = {Start: [70, 78], End: [100, 110] }; VAR EYERIGHTPOSITION = {Start: [150, 78], End: [190, 110]}; Var EyeleftCenterpositation = {x: (Eyeleftposition.end [0] -Eyeleftposition [0] / 2 Eyeleftposition.start [0], Y: (Eyeleftposition.end [1] -emeleftposition [1]) / 2 + Eyeleftposition [1]}; VAR EYERIGHTCENTERPOSITION = {x: (EyerightPosition.nd [0 ] -Eyerightposition.start [ 0]) / 2 + Eyerightposition.start [0], Y: (Eyerightposition.end [1] -Eyerightposition.start [1]) / 2 + Eyerightposition.start [1]}; Var R = 20; VAR EYELELEFT = D. ocument .qurySelector ('#Eyeleft'); Var Eyeright = Document.queerySelector ('#Eyeright'); if (Window.DeviceORIINTANT) {Window.adDeventListener ('D. EvicesOrientation ', Function (Event) {let {alpha, beta, gamma} = Event; Eyeleft.style.left = EyeleftCenterposition.x + Gamma / 90 * R + 'PX'; Eyeright.Style.left = EyerighTcenterpositation.x + 90 * R + ; Eyeleft.style.top = Eyeright .style.top = EyeleftCenterposition.y + Beta / 180 * R + 'PX'; Eyeright.style.transform = Eyeleft.transform = Eyeright.webkittransform = Eyelele ft.style.webkittransform = 'Rotate (' + Beta + 'DEG)';}, False);} Else {document.queryselector ('body'). Innerhtml = 'Browser does not support deviceORientationEvent';} </script> </body> </html>Ultimate effect
The above is all the contents of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support VEVB Wulin.com.