ios - Parallax:在网页中获取视差事件

Question

当网页提供给 iPhone 时，如何在网页上的 javascript 中接收视差事件？我查看了 github.com 的 404 页面，它正在使用加速度计响应运动。只需尝试访问 github.com/f7fu3f73fh39f8h3f93fh398h(或任何编造的页面)并查看他们正在制作的酷炫视差动画。

我查看了源代码，并没有看到他们为获取事件所做的任何特殊操作。

Answer 1

我认为他们只是在使用 Plax

它出现在 plax example page加速度计的东西是由那个插件处理的。

他们只在该页面中包含 jquery 和 plax

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="js/plax.js"></script>
<script type="text/javascript">
  $(document).ready(function () {
    $('#plax-sphere-1').plaxify({"xRange":40,"yRange":40})
    $('#plax-logo').plaxify({"xRange":20,"yRange":20})
    $('#plax-sphere-2').plaxify({"xRange":10,"yRange":10})
    $('#plax-sphere-3').plaxify({"xRange":40,"yRange":40,"invert":true})
    $.plax.enable()
  })
</script>

然后在 plax.js lines 209-243

// Determine if the device has an accelerometer
//
// returns true if the browser has window.DeviceMotionEvent (mobile)
function moveable(){
  return (ignoreMoveable===true) ? false : window.DeviceOrientationEvent !== undefined;
}

// The values pulled from the gyroscope of a motion device.
//
// Returns an object literal with x and y as options.
function valuesFromMotion(e) {
  x = e.gamma;
  y = e.beta;

  // Swap x and y in Landscape orientation
  if (Math.abs(window.orientation) === 90) {
    var a = x;
    x = y;
    y = a;
  }

  // Invert x and y in upsidedown orientations
  if (window.orientation < 0) {
    x = -x;
    y = -y;
  }

  motionStartX = (motionStartX === null) ? x : motionStartX;
  motionStartY = (motionStartY === null) ? y : motionStartY;

  return {
    x: x - motionStartX,
    y: y - motionStartY
  };
}