Récemment, lorsque j'ai utilisé la petite application de voiture jaune, j'ai découvert que le balayage précédent est devenu un petit homme jaune avec des yeux, et il était assez intéressant.
de l'effet oculaire Analyse des effetsIl n'est pas difficile de voir dans l'effet que l'événement gyroscope est atteint.
Jetons un coup d'œil à certains concepts de l'événement gyroscope dans HTML5.
L'événement Gyroscope est deviceorientation , qui obtient principalement alpha , beta , gamma dans l'événement.
Lorsque l'appareil mobile est placé horizontalement, l'angle de rotation autour de l'axe z est de 0 degrés à 360 degrés.
bêtaLorsque l'appareil mobile est placé horizontalement, l'angle de rotation autour de l'axe X, la valeur est de -180 degrés à 180 degrés.
gammaLorsque l'opération est placée horizontalement, l'angle de rotation autour de l'axe z est la valeur de -90 degrés à 90 degrés.
Ici, il vous suffit d'utiliser la version bêta et le gamma.
Décompressez l'APK et obtenez le matériau des yeux:
Implémentation de code <! = Non> <tapie> Document </ Title> <style> #box {positif: lié: 300px; Couverture; En haut: 90px; Glass {Background-Images: URL (Images / Glass.png); = Box> <div id = face> </ div> <div id = eyeleft> </div> <div id = eyeright> </div> <div id = glass> </div> <div id = log> < / div> </div> <cript> 'Utiliser Strict'; / ** Auteur: Wang Leping * Date: 2017.7.17 * / var eyeleftPosition = {start: [70, 78], fin: [100, 110]} ; : (EyeleftPosition.end [1] -emeleftPosition [1]) / 2 + eyeleftPosition [1]}; [0], y: (eyeRightPosition.end [1] -eyeRightPosition.start [1]) / 2 + eyeRightPosition.start [1]}; ); style.left = eyeleftCenterPosition.x + gamma / 90 * r + 'px'; / 180 * r + 'px'; Document.QuerySelector ('Body').Effet ultime
Ce qui précède est tout le contenu de cet article.