mousemoveに基づく視差の問題

Question

明確にするためにこの質問を編集してください。

私はmousemoveに基づいて視差効果を作成しようとしていますが、いくつか問題があります。

1）正しいwindowオフセットを取得できません。 JSFiddleが表示された場合、オフセットはポインタがwindowに入る位置に関連していることがわかります。私はを常にwindowの真ん中に基づいてオフセットしたいと思っています。これを解決するために私は何ができますか？

2）私はそれを複製すると、視差が輝度を変えることに気づくでしょう。私は以前、すべての間で反復するループを試みましたが、成功しませんでした。なぜこのようなことが起こり、どうすれば防止できますか？

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

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は、事前にありがとうございます。

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

または、IMO：その後のような何かを

$('.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

。