웹 사이트 방문시 로딩 애니메이션을 재생하는 방법은 무엇입니까?

Question

기본적으로 모바일 앱처럼 보이게하고 느낄 수있는 웹 사이트를 만들었습니다. 한 가지를 제외하고 모든 것이 순서에 있습니다!

작은 로딩 애니메이션을 제작하여 웹 사이트가 아닌 실제 앱처럼 느껴지도록했습니다. 사이트를 방문 할 때 애니메이션을 재생 한 다음 애니메이션이 완료되면 방문 페이지로 전송하려고합니다.

쉽게 할 수있는 방법이 있습니까?

(웹 사이트가 워드 프레스 테마로 구성되어, 나는 처음부터 코딩.) 당신이 시도 할 수

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

당신은,

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>