javascript - 基于鼠标移动的视差问题

Question

为了清楚起见，编辑此问题。

我正在尝试基于 mousemove 创建视差效果，但遇到了一些问题。

1) 我无法获得正确的window 偏移量。如果您看到 JSFiddle，您会注意到偏移量与指针进入窗口的位置相关。我希望 Assets 层偏移始终基于窗口的中间。我该怎么做才能解决这个问题？

2)您会注意到，当我复制它时，视差改变了强度。我之前尝试过在所有这些之间进行循环迭代，但没有成功。为什么会发生这种情况以及如何预防？

JSFiddle

HTML

<section class="one">
  <div class="parallax">
      <div class="asset asset-layer4">4</div>
      <div class="asset asset-layer3">3</div>
      <div class="asset asset-layer2">2</div>
      <div class="asset asset-layer1">1</div>
  </div>
</section>
<section class="two">
  <div class="parallax">
      <div class="asset asset-layer4">4</div>
      <div class="asset asset-layer3">3</div>
      <div class="asset asset-layer2">2</div>
      <div class="asset asset-layer1">1</div>
  </div>
</section>
<section class="three">
  <div class="parallax">
      <div class="asset asset-layer4">4</div>
      <div class="asset asset-layer3">3</div>
      <div class="asset asset-layer2">2</div>
      <div class="asset asset-layer1">1</div>
  </div>
</section>

JS

var currentX = '';
var currentY = '';
var movementConstant = .015;

$(document).mousemove(function(e) {
    if (currentX == '')
       currentX = e.pageX;

    var xdiff = e.pageX - currentX;
    currentX = e.pageX;

    if (currentY == '')
        currentY = e.pageY;

    var ydiff = e.pageY - currentY;
    currentY = e.pageY;

    $('.parallax div').each( function(i) {
      var $el = $(this);
      var movementx = (i + 1) * (xdiff * movementConstant);
      var movementy = (i + 1) * (ydiff * movementConstant);
      var newX = $el.position().left + movementx;
      var newY = $el.position().top  + movementy;

      $el.css({left: newX + 'px', top: newY + 'px'});
    });
});

CSS

.one,
.two,
.three {
  position: relative;
  width: 100%;
  height: 200px;
}

.one { background-color: pink; }
.two { background-color: lightgray; }
.three { background-color: orange; }

.parallax {
    position: absolute;
    left: 50%;
    top: 50%;
    bottom: 50%;
    right: 50%;
    overflow: visible;
}
.asset {
    position: absolute;
}
.asset-layer1 {
    background-color: yellow;
}
.asset-layer2 {
  background-color: green;
}
.asset-layer3 {
  background-color: blue;
}
.asset-layer4 {
  background-color: red;
}

提前谢谢您。

Answer 1

我猜，但你的问题可能就是这样

var movement = (i + 1) * (xdiff * movementConstant);

应该是

var movement = (z + 1) * (xdiff * movementConstant);

实际上，内部的each是不相关的，所以你可以写:

for (var z = 0; z < 5; z++) {
  console.log(z);
  var $el = $('.parallax-' + z);
  var movement = (z + 1) * (xdiff * movementConstant);
  var movementy = (z + 1) * (ydiff * movementConstant);
  var newX = $el.position().left + movement;
  var newY = $el.position().top + movementy;

  $el.css('left', newX + 'px');
  $el.css('top', newY + 'px');
}

但是不要对每个项目应用单独的类，而是对所有类似的项目使用单个类，然后执行以下操作:

for (var z = 0; z < 5; z++) {
  console.log(z);
  var $el = $('.parallax').eq(z);

或者，我认为，甚至更好:

$('.parallax').each( function(i) {
      var $el = $(this);
      var movementx = (i + 1) * (xdiff * movementConstant);
      var movementy = (i + 1) * (ydiff * movementConstant);
      var newX = $el.position().left + movementx;
      var newY = $el.position().top  + movementy;

      $el.css({left: newX + 'px', top: newY + 'px'});
}