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/