Parallax basé sur mousemove a différent décalage

Question

Comment puis-je avoir le même décalage de parallaxe dans toutes les sections? En ce moment, le décalage augmente à mesure que vous ajoutez sections. Notez que dans la section .two et .three la parallaxe est différente de la section .one. Je veux que la section .two et .three aient la même parallaxe que dans la section .one. Je ne suis pas sûr de ce qui provoque les divs à aller plus loin dans la section .two et .three.

Pourquoi cela se produit-il et comment puis-je le réparer?

JSFiddle

Merci à l'avance.

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

le problème est que vous faites un chacun sur tOUs les enfants div de .parallax. Cela signifie que vous êtes en boucle environ 11 fois. Chaque fois que vous multipliez par une plus grande valeur, il commence à regarder. Au lieu de cela, ce que j'ai fait dans chaque conteneur de Parallax, vous passerez en boucle dans ses enfants, vous donnant une valeur de 0-3. Maintenant ils sont synchronisés!

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