0

How can I have the same parallax offset in all the sections? Right now the offset increases as you add more sections. Note that in section .two and .three the parallax is different from section .one. I want section .two and .three to have the same parallax as in section .one. I am unsure what's causing the divs to go wider in section .two and .three.

Why is this happening and how can I fix it?

JSFiddle

Thank you in advance.

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;
}
Diego Oriani
  • 1,647
  • 5
  • 22
  • 31

1 Answers1

0

the issue is that you are doing an each over ALL over the children div of .parallax. This means you are looping about 11 times. Each time you multiply by a larger i value, so it starts to look off.

Instead, what I have done is within each Parallax container, you will loop through it's children, giving you a value from 0-3. Now they are in sync!

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'});
        })
    });
mrsq
  • 235
  • 2
  • 14