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

2018-10-29    80   133

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

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

カテゴリ: jQuery

comment 登録なしでご自由にご入力いただけます(^^)ぜひぜひ記事のご感想をお聞かせ下さい。

お名前とコメントは入力必須です。

コメントの文字数が短すぎます。

この内容でコメントを送る
コメントをする
この記事がお役に立てましたら是非シェアのご協力お願いします。