CSS背景图像移动

Question

我想在我的网页中的元素，有一个背景图像，当鼠标悬停在，背景图像将移动与本网站像鼠标移动：

http://www.kennedyandoswald.com/#!/premiere-screen

我有这样的HTML代码：

<section id="home" data-speed="3" data-type="background"></section> 

我可以控制的速度，用“数据速=‘3’”，但在背景图像滚动我想知道是否有任何代码类似于'data-sp eed'将使用鼠标移动来移动背景图像而不是滚动。

Answer 1

有许多JS库可以帮助你达到这个效果。我个人使用过很多：http://wagerfield.github.io/parallax/

这是非常容易使用，但达到相同的效果可能需要一些试验和错误的东西..但是这是值得的！

另外一个是不是如上但功能强大的复杂的是：http://stephband.info/jparallax/

你可以尝试两个，看看你找到最适合你使用哪一个..

Answer 2

如果你想推出自己的只需结合使用jQuery mousemove函数和CSS3变换的组合即可。一些沿线的：

$("#target").mousemove(function(event) { 
var msg = "Handler for .mousemove() called at "; 
msg += event.pageX + ", " + event.pageY; 
console.log("<div>" + msg + "</div>"); 
$("#movingobject").css('transform', 'translate(' + event.pageY /4 + 'px,' + -event.pageX /4+ 'px)'); 
}); 

我做了一个jsfiddle poc，你可以看到它的行动。当然，你将不得不根据你的具体需求调整运动功能。

http://jsfiddle.net/ZmZhw/