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:x 这样 div 本身就会移动一点。

我的理由是 div 包含 CSS 动画元素，所以它需要是一个 div 里面有内容，而不是背景图片。

使用上面的代码有什么解决方案吗？

Answer 1

使用 jQuery.offSet() 怎么样？您可能想要调整 math/values，但我认为它应该让您朝着正确的方向前进。

$(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/

Mousemove 视差效果移动 div 的位置

Mousemove parallax effect moves position of div

css

jquery

parallax

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