mousemoveに基づく視差には異なるオフセットがあります

Question

どのようにすべてのセクションで同じ視差オフセットを使用できますか？現在は、sectionsを追加すると、オフセットが増加します。セクション.twoと.threeでは、視差はセクション.oneとは異なります。セクション.twoと.threeは、セクション.oneと同じ視差を持つようにします。 div32がセクション.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; 
} 

Answer 1

問題は、オーバーALL .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'}); 
     }) 
    });