HTML5-Beispiel für einen Augenbewegungseffekt-H5-Tutorial-php.cn

HTML5-Beispiel für einen Augenbewegungseffekt

巴扎黑

Freigeben： 2017-08-07 14:21:03

Original

3046 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich ein Beispiel für die Realisierung des Augenbewegungseffekts auf der ofo-Homepage basierend auf dem HTML5-Gyroskop vor. Es hat einen gewissen Referenzwert.

Kürzlich verwendete ofo-Gelbauto-App Als ich das Bild unten durchsuchte, stellte ich fest, dass es sich in einen Diener mit beweglichen Augen verwandelte. Ich fand es ziemlich interessant, den Effekt hier zu imitieren.

Ofo-Augeneffekt

Wirkungsanalyse

Es ist nicht schwer, den Effekt zu erkennen, der durch Gyroskopereignisse erzielt wird.

Hier sehen wir uns zunächst einige Konzepte von Gyroskopereignissen in HTML5 an.

Das Gyroskop-Event ist deviceorientation Hier bekommen wir hauptsächlich die alpha, beta, gamma im Event.

aplha

Der Drehwinkel um die Z-Achse, wenn das Mobilgerät horizontal platziert wird, im Bereich von 0 bis 360 Grad.

beta

Der Drehwinkel um die X-Achse, wenn das Mobilgerät horizontal platziert wird, im Bereich von -180 Grad auf 180 Grad.

Gamma

Der Drehwinkel um die Z-Achse, wenn das Mobilgerät horizontal platziert wird, im Bereich von -90 Grad auf 90 Grad.

Hier müssen nur Beta und Gamma verwendet werden.

Entpacken Sie die APK und holen Sie sich das Augenmaterial:

Code-Implementierung

<!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>

Nach dem Login kopieren

Endeffekt

Das obige ist der detaillierte Inhalt vonHTML5-Beispiel für einen Augenbewegungseffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!