移動/パンの背景画像を作成できました。それはjsfiddleでうまく見えてうまくいきます:
http://jsfiddle.net/juhant/jxthp/6/
しかし、ブラウザでテストすると、動きがスムーズではなく、写真がフリーズすることがあります。
これはHTMLです:
<div id="pageBg">
</div>
これはCSSです:
#pageBg {
background: url('http://enos.itcollege.ee/~rselis/bg_front.jpg') no-repeat 0 0 scroll;
height: auto;
left: 0;
min-height: 900px;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
height: 100%;
}
そしてjQueryビット:
$(document).ready(function(){
$('#pageBg').mousemove(function(e){
var mousePosX = (e.pageX/$(window).width())*100;
$('#pageBg').css('background-position-x', mousePosX +'%');
var mousePosY = (e.pageY/$(window).height())*100;
$('#pageBg').css('background-position-y', mousePosY +'%');
});
});
これは何が原因で、どうすれば修正できますか? 前もって感謝します。