jQueryを使用してマウスの位置に基づいてdivの背景を移動する

Question

私は、x軸のマウスの動きに基づいてdivの背景を微妙に移動するコードを書きたいと思っています。現在、.mousemoveと背景位置プロパティを使用して背景画像を移動しています。ウィンドウサイズに応じて背景を少し動かしてページから外れないようにしなければならなかった。これを処理するif文をいくつか設定しましたが、ウィンドウのサイズを変更するとバックグラウンドの位置は更新されません。ページが完全にリロードされたときにのみ動作し、if文を再度読み込み、バックグラウンドが適切に配置されます。背景の位置は、小さいウィンドウに対応するメディアクエリでは23％50％、大きなウィンドウサイズに対応するメディアクエリでは40％50％です。ウィンドウのサイズが変更されたときにリアルタイムでバックグラウンドの位置を更新するコードをどのように変更することができますか？

ありがとうございました！

$(document).ready(function(){ 

    if ($(".container").css("background-position")=="23% 50%") 
    { 
     $(document).mousemove(function(event) { 
     var m = event.pageX; 
     var q = 23 + m/200; 
     $(".container").css({"background-position": q + "% 50%"}); 
     $(".andServices").text(q); 
     }); 
    } 
    else if ($(".container").css("background-position")=="40% 50%") 
    { 
     $(document).mousemove(function(event){ 
     var z = event.pageX; 
     var t = 40 + z/200; 
     $(".container").css({"background-position": t + "% 50%"}); 
     $(".creativeProducts").text(t); 
     }); 
    } 

}); 

<div class="container"> 
<div class = "mobileBG"></div> 
    <div class="textContainer"> 

    <p class="creativeProducts">Creative Products</p> 
    <p class = "andServices">And Services</p> 
    <p class = "ebaySales">eBay Sales</p> 
    <p class = "seoServices">SEO Services</p> 
    <p class = "webDesign">Web Design</p> 
    <p class = "photography">Photography</p> 
    </div> 
</div> 

.container{ 
    width:100%; 
    position:relative; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    height:750px; 
    background-image:url(images/frontCoverImage.gif); 
    background-size:cover; 
    background-repeat:no-repeat; 
    background-position:23% 50%; 
} 

Answer 1

基本的にブラウザのサイズ変更をキャッチしたい場合は、以下を使用する必要があります。

$(window).resize(); 

希望します。

Answer 2

は、ユーザーウィンドウ/ブラウザのサイズを変更する

Answer 3

@Normanは、あなたがこのためにjQueryの.resize()を使用する必要があります右である時はいつでも基本的に動作します。この

$(window).resize(function(){ 
    // Your if else statement here 
}); 

jQueryの.resize()をお試しください。

ただし、.on()イベントリスナーを使用して.resize()と.load()をまとめることができます。

$(document).ready(function() { 
 
    $(window).on('load resize', function() { 
 
    if ($(".container").css("background-position") == "23% 50%") { 
 
     $(document).mousemove(function(event) { 
 
     var m = event.pageX; 
 
     var q = 23 + m/200; 
 
     $(".container").css({ 
 
      "background-position": q + "% 50%" 
 
     }); 
 
     $(".andServices").text(q); 
 
     }); 
 
    } else if ($(".container").css("background-position") == "40% 50%") { 
 
     $(document).mousemove(function(event) { 
 
     var z = event.pageX; 
 
     var t = 40 + z/200; 
 
     $(".container").css({ 
 
      "background-position": t + "% 50%" 
 
     }); 
 
     $(".creativeProducts").text(t); 
 
     }); 
 
    } 
 
    }); 
 
});

.container { 
 
    width: 100%; 
 
    position: relative; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    height: 750px; 
 
    background-image: url(images/frontCoverImage.gif); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-position: 23% 50%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="mobileBG"></div> 
 
    <div class="textContainer"> 
 
    <p class="creativeProducts">Creative Products</p> 
 
    <p class="andServices">And Services</p> 
 
    <p class="ebaySales">eBay Sales</p> 
 
    <p class="seoServices">SEO Services</p> 
 
    <p class="webDesign">Web Design</p> 
 
    <p class="photography">Photography</p> 
 
    </div> 
 
</div>