0

移動/パンの背景画像を作成できました。それは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 +'%');
   }); 
});

これは何が原因で、どうすれば修正できますか? 前もって感謝します。

4

1 に答える 1