Exemple HTML5 d'effet de mouvement des yeux-Tutoriel H5-php.cn

Exemple HTML5 d'effet de mouvement des yeux

巴扎黑

Libérer： 2017-08-07 14:21:03

original

3030 Les gens l'ont consulté

Cet article présente principalement un exemple de réalisation de l'effet de mouvement oculaire sur la page d'accueil d'ofo basé sur un gyroscope HTML5. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Application de voiture jaune récemment utilisée lorsque. En parcourant, j'ai découvert que lorsque j'ai glissé l'image ci-dessous, elle s'est transformée en un serviteur avec des yeux mobiles. J'ai trouvé que c'était assez intéressant. J'ai utilisé HTML5 pour imiter l'effet ici.

effet yeux ofo

Analyse de l'effet

Il n'est pas difficile de voir à l'effet que cela est obtenu à l'aide d'événements gyroscopiques.

Ici, nous examinons d'abord quelques concepts d'événements gyroscopiques en HTML5.

L'événement gyroscope est deviceorientation Ici, nous obtenons principalement les alpha, beta, gamma dans l'événement.

aplha

L'angle de rotation autour de l'axe Z lorsque l'appareil mobile est placé horizontalement, allant de 0 à 360 degrés.

bêta

L'angle de rotation autour de l'axe X lorsque l'appareil mobile est placé horizontalement, allant de -180 degrés à 180 degrés.

gamma

L'angle de rotation autour de l'axe Z lorsque l'appareil mobile est placé horizontalement, allant de -90 degrés à 90 degrés.

Ici, seuls les bêta et gamma doivent être utilisés.

Décompressez l'apk et obtenez le matériel pour les yeux :

Implémentation du code

<!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{
      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>
  <p id="box">
    <p id="face"></p>
    <p id="eyeLeft"></p>
    <p id="eyeRight"></p>
    <p id="glass"></p>
    <p id="log"></p>
  </p>
<script>
&#39;use strict&#39;;

/*
* author: 王乐平
* 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(&#39;#eyeLeft&#39;);
var eyeRight = document.querySelector(&#39;#eyeRight&#39;);

if (window.DeviceOrientationEvent) {

  window.addEventListener(&#39;deviceorientation&#39;, function (event) {

    let {alpha, beta, gamma} = event;

    eyeLeft.style.left = eyeLeftCenterPosition.x + gamma / 90 * r + &#39;px&#39;;
    eyeRight.style.left = eyeRightCenterPosition.x + gamma / 90 * r + &#39;px&#39;;
    eyeLeft.style.top = eyeRight.style.top 
                      = eyeLeftCenterPosition.y + beta / 180 * r + &#39;px&#39;;

    eyeRight.style.transform = eyeLeft.style.transform 
                         = eyeRight.style.WebkitTransform 
                         = eyeLeft.style.WebkitTransform 
                         = &#39;rotate(&#39; + beta + &#39;deg)&#39;;
  }, false);
} else {
  document.querySelector(&#39;body&#39;).innerHTML = &#39;浏览器不支持DeviceOrientationEvent&#39;;
}
</script>
</body>
</html>

Copier après la connexion

Effet final