Exemplo de realizar o efeito do movimento ocular baseado no giroscópio HTML5

Recentemente, quando usei o pequeno aplicativo de carros amarelos, descobri que a varredura anterior abaixo se tornou um pouco amarelo com os olhos, e parecia bastante interessante.

Não é difícil ver pelo efeito que o evento do giroscópio é alcançado.

Vamos dar uma olhada em alguns conceitos do evento de giroscópio no HTML5.

O evento de giroscópio é deviceorientation , que obtém principalmente alpha , beta , gamma no evento.

Quando o dispositivo móvel é colocado horizontalmente, o ângulo de rotação ao redor do eixo Z é de 0 graus a 360 graus.

Quando o dispositivo móvel é colocado horizontalmente, o ângulo de rotação ao redor do eixo x, o valor é de -180 graus a 180 graus.

Quando a operação é colocada horizontalmente, o ângulo de rotação ao redor do eixo z é o valor de -90 graus a 90 graus.

Aqui, você só precisa usar beta e gama.

Descompacte o apk e obtenha o material dos olhos:

 <! = Não> <title> Cobertura; Topo: 90px; Glass {Background-Images: URL (Imagens/Glass.png); = Caixa> <div id = face> </div> <div id = eyeleft> </div> <div id = eyeright> </div> <div id = vidro> </div> <div id = log> < /div> </div> <cript> 'Use Strict';/** Autor: Wang leping* Data: 2017.7.17*/var eyeleftPosition = {start: [70, 78], fim: [100, 110]} ; : (EyeleftPosition. [0], y: (eyerightPosition.end [1] -eyerightPosition.start [1]) / 2 + eyerightPosition.start [1]}; ); style.left = eyeleftCenterPosition.x + gama / 90 * r + 'px'; / 180 * r + 'px'; Document.QuerySelector ('Body').

Efeito final

O acima é todo o conteúdo deste artigo.