アクセス時やページ移動時にエフェクトを加える

Result

動作確認をするには再生ボタンを押してください。

jQuery

$(document).ready(function() {
    //bodyを非表示にする
    $("body").css("display", "none");
    //フェードイン表示
    $("body").fadeIn(2000);
    //ページ移動の処理
    $("a.fade").click(function(event) {
        event.preventDefault();
        linkLocation = this.href;
        $("body").fadeOut(1000, redirectPage);
    });
    function redirectPage() {
        window.location = linkLocation;
    }
});

css

h1{font-size:25px;margin-bottom:20px;}
p{margin-bottom:20px;}
#header{margin:25px;width:500px;}

html

<div id="wrapper">
    <div id="header">
         <h1>Sample</h1>
        <p><a href="/" class="fade">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</div>