基於mousemove的視差問題

Question

爲清晰起見編輯此問題。

我想創建一個基於mousemove的視差效果，但我遇到了一些問題。

1）我無法獲得正確的window偏移量。如果您看到JSFiddle，您會注意到偏移量與指針輸入window的位置有關。我希望asset-layer偏移量始終基於window的中間值。我能做些什麼來解決這個問題？ 2）你會注意到，當我複製視差時，視差會改變強度。我以前嘗試過一個循環來遍歷所有它們，但我沒有成功。爲什麼會發生這種情況，我該如何預防？

JSFiddle

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> 

JS

var currentX = ''; 
var currentY = ''; 
var movementConstant = .015; 

$(document).mousemove(function(e) { 
    if (currentX == '') 
     currentX = e.pageX; 

    var xdiff = e.pageX - currentX; 
    currentX = e.pageX; 

    if (currentY == '') 
     currentY = e.pageY; 

    var ydiff = e.pageY - currentY; 
    currentY = e.pageY; 

    $('.parallax div').each(function(i) { 
     var $el = $(this); 
     var movementx = (i + 1) * (xdiff * movementConstant); 
     var movementy = (i + 1) * (ydiff * movementConstant); 
     var newX = $el.position().left + movementx; 
     var newY = $el.position().top + movementy; 

     $el.css({left: newX + 'px', top: newY + 'px'}); 
    }); 
}); 

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

預先感謝您。

Answer 1

我猜，但你的問題可能是

var movement = (i + 1) * (xdiff * movementConstant); 

應該

var movement = (z + 1) * (xdiff * movementConstant); 

而實際上內部each是無關緊要的，所以你可以寫：

for (var z = 0; z < 5; z++) { 
    console.log(z); 
    var $el = $('.parallax-' + z); 
    var movement = (z + 1) * (xdiff * movementConstant); 
    var movementy = (z + 1) * (ydiff * movementConstant); 
    var newX = $el.position().left + movement; 
    var newY = $el.position().top + movementy; 

    $el.css('left', newX + 'px'); 
    $el.css('top', newY + 'px'); 
} 

但不是對每個項目應用單獨的類，而是對所有類似的項目使用單個類那麼這樣做：

for (var z = 0; z < 5; z++) { 
    console.log(z); 
    var $el = $('.parallax').eq(z); 

或者，國際海事組織，甚至更好：

$('.parallax').each(function(i) { 
     var $el = $(this); 
     var movementx = (i + 1) * (xdiff * movementConstant); 
     var movementy = (i + 1) * (ydiff * movementConstant); 
     var newX = $el.position().left + movementx; 
     var newY = $el.position().top + movementy; 

     $el.css({left: newX + 'px', top: newY + 'px'}); 
} 

Answer 2

你真的複雜的問題。它應該是這樣一個簡單的邏輯。這裏的輸入只是鼠標指針到窗口中心點的距離。計算只是用這個輸入完成的。不需要計算任何鼠標移動差異。更確切地說，我們需要鼠標指針相對於中心點的座標（因此它可以具有負值，在這種情況下，它應該位於中心點的左側）。

此基礎上簡單的邏輯，代碼可以更加簡單，看起來像這樣：

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

Demo

我希望我知道你想要什麼正確。