为了清楚起见,编辑此问题。
我正在尝试基于 mousemove
创建视差效果,但遇到了一些问题。
1) 我无法获得正确的window
偏移量。如果您看到 JSFiddle,您会注意到偏移量与指针进入窗口的位置相关。我希望 Assets 层偏移始终基于窗口的中间。我该怎么做才能解决这个问题?
2)您会注意到,当我复制它时,视差改变了强度。我之前尝试过在所有这些之间进行循环迭代,但没有成功。为什么会发生这种情况以及如何预防?
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;
}
提前谢谢您。
最佳答案
我猜,但你的问题可能就是这样
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'});
}
关于javascript - 基于鼠标移动的视差问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42868510/