suchen

Heim >Web-Frontend >H5-Tutorial >HTML5-Beispiel für einen Augenbewegungseffekt

HTML5-Beispiel für einen Augenbewegungseffekt

巴扎黑
巴扎黑Original
2017-08-07 14:21:033083Durchsuche

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>

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Eine Erklärung der HTML5-Server-Push-EreignisseNächster Artikel：Eine Erklärung der HTML5-Server-Push-Ereignisse

In Verbindung stehende Artikel

Mehr sehen