HTML5 example of eye movement effect

This article mainly introduces an example of realizing the eye movement effect on the ofo homepage based on HTML5 gyroscope. It has a certain reference value. Interested friends can refer to it

Recently used the ofo yellow car App When I was browsing, I found that when I swiped the image below, it turned into a minion with moving eyes. I thought it was quite interesting. I used HTML5 to imitate the effect here.

ofo eye effect

##Effect analysis

It is not difficult to see from the effect that it is achieved using gyroscope events.

Let’s first look at some concepts of gyroscope events in HTML5.

The gyroscope event is

deviceorientation. Here we mainly get the alpha, beta, gamma in the event.

aplha

The angle of rotation around the Z-axis when the mobile device is placed horizontally, ranging from 0 to 360 degrees.

beta

The angle of rotation around the X-axis when the mobile device is placed horizontally, ranging from -180 degrees to 180 degrees.

gamma

The angle of rotation around the Z-axis when the mobile device is placed horizontally, the value is -90 degrees to 90 degrees.

Here, only beta and gamma need to be used.

Unzip the apk and get the eye material:

Code implementation

final effect

The above is the detailed content of HTML5 example of eye movement effect. For more information, please follow other related articles on the PHP Chinese website!