Mousemove视差效果移动div的位置

Question

我试图创造一个轻微的视差效果(我不确定它是否真的构成了视差,但它是一个类似的想法).当鼠标移动时,有四个层以略微不同的速率移动.

我找到了一个很好的例子,可以提供类似于我想要的东西:

http://jsfiddle.net/X7UwG/2/

它通过#landing-content在鼠标移动时移动div 上的背景位置来实现这一点.

$(document).ready(function(){
  $('#landing-content').mousemove(function(e){
    var x = -(e.pageX + this.offsetLeft) / 20;
    var y = -(e.pageY + this.offsetTop) / 20;
    $(this).css('background-position', x + 'px ' + y + 'px');
  });  
});

但是,我无法找到一种方法来让这种方法不是在background-position班次上工作,而是在div位置转换上.例如position:relative;,top:xdiv本身就会移动一点点.

我的理由是div包含CSS动画元素,因此它需要是包含内部内容的div,而不是背景图像.

使用上述代码的任何解决方案？

Answer 1

如何使用jQuery.offSet()呢？您可能想要调整数学/值,但我认为它应该让您朝着正确的方向.

$(document).ready(function () {
    $('#layer-one').mousemove(function (e) {
        parallax(e, this, 1);
        parallax(e, document.getElementById('layer-two'), 2);
        parallax(e, document.getElementById('layer-three'), 3);
    });
});

function parallax(e, target, layer) {
    var layer_coeff = 10 / layer;
    var x = ($(window).width() - target.offsetWidth) / 2 - (e.pageX - ($(window).width() / 2)) / layer_coeff;
    var y = ($(window).height() - target.offsetHeight) / 2 - (e.pageY - ($(window).height() / 2)) / layer_coeff;
    $(target).offset({ top: y ,left : x });
};

JSFiddle:http://jsfiddle.net/X7UwG/854/