Question

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

我正在尝试根据mousemove制作视差效果，但我遇到了一些问题。

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

2）你会注意到视差会在重复时改变强度。我之前尝试过循环来迭代它们但我没有成功。为什么会发生这种情况？我该如何预防？

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

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

基于mousemove的视差问题

2 个答案: