基于mousemove的视差有不同的偏移量

Question

如何使所有部分的视差偏移量相同？现在偏移量随着您添加更多 sections 而增加。请注意，在 .two 和 .three 部分中，视差与 .one 部分不同。我希望 .two 和 .three 部分具有与 .one 部分相同的视差。我不确定是什么导致 .two 和 .three.

部分的 div 变宽

为什么会发生这种情况，我该如何解决？

JSFiddle

提前致谢。

JS

var currentX = '';
var currentY = '';
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'});
    });
});

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>

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;
}
body {
  overflow:hidden;
}

Answer 1

问题是您正在对 .parallax 的子项 div 进行遍历。这意味着你循环了大约 11 次。每次你乘以一个更大的 i 值，所以它开始看。

相反，我所做的是在每个 Parallax 容器中，您将遍历它的子项，为您提供 0-3 的值。现在他们同步了！

https://jsfiddle.net/p4hrbdge/2/

   $('.parallax').each( function(i) {
        $(this).find('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'});
        })
    });

基于mousemove的视差有不同的偏移量

Parallax based on mousemove has different offset

javascript

mousemove

parallax