ウェブサイトにアクセスして読み込み中のアニメーションを再生する方法は？

Question

基本的には、モバイルアプリのように見えると感じるウェブサイトを作っています。 1つのことを除いてすべてが順調です！

小さな読み込みアニメーションを作成しました。実際のアプリのように感じさせるだけで、ウェブサイトではありません。サイトを訪れたときにアニメーションを再生してから、アニメーションが終了したらリンク先ページに移動します。

これは簡単な方法ですか？

（ウェブサイトは、ワードプレスのテーマとして作られて、私は最初からコード化された。）あなたはこれを試すことができ

Answer 1

：それが動作するかどうか

jQuery(document).ready(function(){ 
    // You animate your element 
    jQuery('#your-element').addClass('animate'); 
    setTimeout(function(){ 
    window.location = 'http://www.your-new-url.com'; 
    }, 2000); // You let 2 seconds of animation and then you redirect the user. 
}); 

を教えてください！ :)

Answer 2

アニメーションでdivを作ることができます。 アニメーションが終了したら、それを非表示にします。

<script type="text/javascript">setTimeout("$('#loading').fadeOut(700);", 3000);</script> 

<div id="loading"> 
<img src="http://i.imgur.com/JxLFV9e.jpg"> 
<table width="1000" height="100" cellspacing="0" cellpadding="0" border="0"> 
<tbody> 
    <tr> 
     <td id="loadingimg"> 
     <img src="http://i.imgur.com/RB7FxT1.gif"> 
     <p> 
     Loading Webpage... 
     </p> 
     </td> 
    </tr> 
</tbody> 
</table> 
</div> 

<style> 
#loading { 
position: absolute; 
top: 0; 
left: 0; 
padding-top: 100px; 
text-align: center; 
background-color: white; 
width: 100%; 
height: 100%; 
color: black; 
z-index: 9000; 
} 
#loadingimg { 
position: absolute; 
top: 0; 
left: 0; 
padding-top: 500px; 
text-align: center; 
width: 100%; 
height: 100%; 
color: black; 
z-index: 9000; 
} 
</style 

Answer 3

あなたはそれが、助けに感謝を解決していますwindow.setIntervalに（checkReady、）

function onReady(callback) { 
 
    var intervalID = window.setInterval(checkReady, 3000); 
 
    function checkReady() { 
 
     if (document.getElementsByTagName('body')[0] !== undefined) { 
 
      window.clearInterval(intervalID); 
 
      callback.call(this); 
 
     } 
 
    } 
 
} 
 
function show(id, value) { 
 
    document.getElementById(id).style.display = value ? 'block' : 'none'; 
 
} 
 
onReady(function() { 
 
    show('page', true); 
 
    show('loading', false); 
 
});

h1 { 
 
    font-size: 2em; 
 
    margin-bottom: 0.2em; 
 
    padding-bottom: 0; 
 
} 
 
p { 
 
    font-size: 1.5em; 
 
    margin-top: 0; 
 
    padding-top: 0; 
 
} 
 
#page { 
 
    display: none; 
 
} 
 
#loading { 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 100; 
 
    width: 100vw; 
 
    height: 100vh; 
 
    background-color: rgba(192, 192, 192, 0.5); 
 
    background-image: url("https://loading.io/spinners/hourglass/lg.sandglass-time-loading-gif.gif"); 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
}

<div id="page"> 
 
    <h1 align="center">Welcome to My Page</h1> 
 
</div> 
 
<div id="loading"></div>