JavaScriptを中心とした問題点

Question

これは私の最初の質問です。私は問題を説明するために最善を尽くしますので、私はjavascript/jqueryの新機能です。

x軸のブラウザの中央にアニメーション表示される2つの画像があり、ページの読み込み時に問題なく動作します。私の問題は、ブラウザがロードされた後にブラウザのサイズを変更するときに発生します。要素はブラウザの中央に留まらず、ページをリフレッシュして再びうまく動作するまで中央から外れています。

この問題を根絶する方法があるかどうか疑問に思っていましたか？

サイトwww.puzzletest.click

で見ることができ、事前にありがとうございます。

<div id="fullpage"> 
    <div id="section1" class="section"> 
     <div> 
      <img src="img/softsellcloud.png" class="ss-cloud" alt="Soft Sell Online - Business Automation Software"> 
      <img src="img/softselltext.png" class="ss-text" alt="Soft Sell Online - Business Automation Software"> 
     </div> 
     <div class="caption"> 
      <h1>Business Automation Software.</h1> 
      <h2>We Help Companies Work Smarter!</h2> 
      <a href="tel:01772 842112"><img src="img/phone-log.png" alt="Phone Us Now"></a> 
     </div> 
     <div> 
      <img src="img/scroll-arrow.png" alt="Scrolling Arrow" id="arrow1" class="arrow"> 
     </div> 
    </div> 

私のjavascriptのコードはこれです...

$(document).ready(function() { 
     $('#fullpage').fullpage(); 
    }); 

$(document).ready(function() { 
    $(".ss-cloud").animate({ 
    left: $(".ss-cloud").parent().width()/2 - $(".ss-cloud").width()/2 
    }, 2000); 
    }); 

$(document).ready(function() { 
    $(".ss-text").animate({ 
    right: $(".ss-text").parent().width()/2 - $(".ss-text").width()/2 
}, 2000); 
}); 

$(document).ready(function() { 
    $(".caption").delay(2000).animate({ 
    opacity: 1, 
    }, 3000, function() { 
    }); 
}); 

Answer 1

は、スクリプトがあなたのウィンドウのサイズを変更するたび発射するよう.resize機能を使用する必要があります。

$(window).resize(function(){ 
// Your code here 

}）;

も参照してください。 https://api.jquery.com/resize/