ページ読込み時に下から上に移動しながらフェードインというリッチなコンテンツ表示を簡単実装

2018-10-29
ページを開いた際にフェードでページ全体を表示する方法はネットに出回っていますが、
「下から上に移動しながらのフェード」これがなかったので、自分で調整したものを残します。

単純に、jqueryのappend関数(コンテンツ追加)でbodyのmargin初期値を50pxなどにして、delay(ディレイ)後にmarginを0にする。
同時にフェード効果とのコラボとなり、非常に心地の良い効果になります。
$(function(){
    $('head').append(
        '<style>body{display:none; margin-top:50px;}'
    );
    $(window).on('load', function() {
        $('body').delay(100).fadeIn('slow').animate(
        {
            'margin-top':0,
        },{
            duration: 'slow',
            queue: false
        });
    });
});
カテゴリ: Javascript