ページ間のjavascriptのフェード

まずはJSでかなり新しいです。私はウェブサイトをビルドしており、イントロがあります。このイントロ動画は別のページに配置する必要があり、終了後に次のウェブページが自動的に読み込まれます。ページ間のjavascriptのフェード

<body onload="setTimeout(
function(){ 
    window.location.href = 'file:///C:/Users/skatto/Desktop/art%20contest/art_contest_page.html'; 
}, 32000)">

これは私が自動的に次のページ、をロードするために私のhtmlファイルに使用していますが、それはかなり「シャープ」とラフだスクリプトは、どのように私は、フェードアニメーションを追加することができますか？それをよりスムーズにするには

出典

2016-12-07 Mauro Scattolini

あなたのコードを提供し、あなたが忘れているように見える、あなたがこれまでに – Pixelomo

を試してみましたが、私たちを教えてください'script' –

この質問をご覧くださいhttp://stackoverflow.com/questions/6805482/css3-transition-animation-on-load – Yaser

シンプルなCSSがこれを行うことができます。なぜスクリプトを使用するのですか？アニメーションfadeInを、ロードする前にフェードインしたい任意のページに追加します。

body { 
 
    animation: fadeIn 0.5s linear; 
 
} 
 
@keyframes fadeIn { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    } 
 
}

<div> 
 
    Something 
 
    <br/>Something 
 
    <br/>Something 
 
    <br/>Something 
 
    <br/>Something 
 
    <br/>Something 
 
    <br/>Something 
 
    <br/>Something 
 
    <br/>Something 
 
    <br/>Something 
 
    <br/>Something 
 
    <br/>Something 
 
    <br/>Something 
 
    <br/>Something 
 
    <br/>Something 
 
    <br/>Something 
 
    <br/> 
 
</div>

出典

2016-12-07 11:21:52

ページ1に、この

のように試してみてください。

<a href="otherPage.html" class="transition">LINK</a> 

$(document).ready(function() { 
    $("body").css("display", "none"); 

    $("body").fadeIn(2000); 

    $("a.transition").click(function(event){ 
     event.preventDefault(); 
     linkLocation = this.href; 
     $("body").fadeOut(1000, redirectPage);  
    }); 

    function redirectPage() { 
     window.location = linkLocation; 
    } 
});

出典

2016-12-07 11:36:08 RAj

答えて

関連する問題