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

2018-10-29 609 1526

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

単純に、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 

        });

    });

});