Question

如何在所有部分中获得相同的视差偏移？现在，随着您添加更多sections，偏移量会增加。请注意，在.two和.three部分中，视差与部分.one不同。我希望部分.two和.three具有与部分.one中相同的视差。我不确定导致div在.two和.three部分中变宽的原因。

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

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

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

0 个答案: