基于 mousemove 的视差问题

Question

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

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

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

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);

或者，imo，甚至更好：

$('.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'});
}

Answer 2

您确实使问题复杂化了。应该是这样一个简单的逻辑。这里的输入只是鼠标指针到窗口中心点的距离。计算只是使用该输入完成的。不需要计算任何鼠标移动差异。更准确地说，我们需要鼠标指针相对于中心点的坐标（所以它可以有负值，在这种情况下它应该在中心点的左侧）。

基于这个简单的逻辑，代码可以简化很多，如下所示：

var movementConstant = .05;

$(document).mousemove(function(e) {
   var xToCenter = e.pageX - window.innerWidth/2;
   var yToCenter = e.pageY - window.innerHeight/2;

   $('.parallax div').each( function(i) {
     var $el = $(this);
     var newX  = (i + 1) * (xToCenter * movementConstant);
     var newY = (i + 1) * (yToCenter * movementConstant);      
     $el.css({left: newX + 'px', top: newY + 'px'});
   });
});

Demo

我希望我能正确理解你想要什么。