mousemove를 기준으로 한 시차에는 다른 오프셋이 있습니다.

Question

모든 섹션에서 동일한 시차 옵셋을 어떻게 유지할 수 있습니까? 지금은 sections을 추가하면 오프셋이 증가합니다. 섹션 .two 및 .three에서 시차는 섹션 .one과 다릅니다. 섹션 에서와 동일한 시차를 가지려면 .two 및 .three 섹션이 필요합니다. 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

문제는 이상 모든 .parallax의 어린이 사업부에 걸쳐 각각을하고 있다는 것입니다. 이것은 당신이 약 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'}); 
     }) 
    });