javascript - 具有视差背景的浏览器和移动问题 (javascript/jquery)

Question

我制作了一个使用移动设备的加速度计（或桌面的鼠标位置）的视差背景效果，但我遇到的主要问题是：

在移动 safari 和移动 chrome 中，一旦我的 iphone 达到 90+ 度角（像这样 |），视差背景图像向左或向右跳跃（取决于我手机的倾斜度）比它应该快得多。

这是网站：http ://reveriesrefined.com/myftp/parBack/

以下是相关代码：

function mobileCall() {
  if (window.DeviceOrientationEvent) {
    $(window).on("deviceorientation", function () {
      var x = event.gamma;
      var y = event.beta;

      //data-smoothing
      if ( y > lastY + 1 || y < lastY - 1 ) {
          parallaxBackMobile(x, y);
      }
      else if ( x > lastX + 1 || x < lastX - 1 ) {
          parallaxBackMobile(x, y);
      }

      lastX = x;
      lastY = y;
    });
  }
}

function parallaxBackMobile(x, y) {
  var numX = x * 2;
  var numY = y * 2;
  var elem = $('#background');

  elem.css({
    left : -numX,
    top : -numY - 100
  });
}

Answer 1

我用这个解决了它：

if ( x > 90 ) {
    x = x - (2 * (x - 90));
}
else if ( x < -90 ) {
    x = x - (2 * (x + 90));
}

你得到从数字到 90 的距离，将它乘以 2，然后从原始数字中减去它。

这意味着 0,180 变为 0,90,0。0,-180 变为 0,-90,0。