mousemoveで背景画像を移動する

Question

私はmousemoveで背景画像が動くようにしています。今度は画像が動かず、同じままになります。また、スクリプトには誤りがあると思いますが、どの部分が間違っているのか分かりませんでした。

/* background movement by mouse*/ 
 

 
$(document).ready(function() { 
 
    var movementStrength = 25; 
 
    var height = movementStrength/$(window).height(); 
 
    var width = movementStrength/$(window).width(); 
 
    $("#top-image").mousemove(function(e) { 
 
    var pageX = e.pageX - ($(window).width()/2); 
 
    var pageY = e.pageY - ($(window).height()/2); 
 
    var newvalueX = width * pageX * -1 - 25; 
 
    var newvalueY = height * pageY * -1 - 50; 
 
    $('#top-image').css("background-position", newvalueX + "px  " + newvalueY + "px"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <img id="top-image" src="https://static.pexels.com/photos/4164/landscape-mountains-nature-mountain.jpeg"> 
 
</div>

Answer 1

あなたは、背景画像を使用していないので、私はあなたがバックグラウンド-positionプロパティを変更しようとするためには何も影響を与えているとは思いません。また、移動量はウィンドウの大きさではなく画像の大きさに基づいています。あなたのHTMLの画像タグを追加して、あなたが意味を成さないの背景位置でアニメーション化を試みた

$(document).ready(function() { 
 
       var movementStrength = 25; 
 
       var img = document.getElementById('top-image'); 
 
       var imagewidth = img.clientWidth; 
 
       var imageheight = img.clientHeight; 
 
       var height = movementStrength/imageheight; 
 
       var width = movementStrength/imagewidth; 
 
       $("#top-image").mousemove(function(e) { 
 
        var pageX = e.pageX - ($(window).width()/2); 
 
        var pageY = e.pageY - ($(window).height()/2); 
 
        var newvalueX = width * pageX * -1; 
 
        var newvalueY = height * pageY * -1; 
 
        $(this).css("margin-left", newvalueX + "px"); 
 
        $(this).css("margin-top", newvalueY + "px"); 
 
       }); 
 
       });

#top-image { 
 
    width: 500px; 
 
    height: auto; 
 
    padding-top:20px; 
 
} 
 

 
.container { 
 
    width: 600px; 
 
    height: 380px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
TITLE 
 
</div> 
 
<div class="container"> 
 
    <img id="top-image" src="https://static.pexels.com/photos/4164/landscape-mountains-nature-mountain.jpeg"> 
 
</div> 
 
<div> 
 
Some More Text 
 
</div>