背景色が伸びる(下から上)

画面遷移
-背景色が伸びる(下から上)-

デモページを見る

See the Pen 4-2-2 背景色が伸びる(下から上) by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

「Result」下のRerunを押して動きを確かめてね!↑

動きを実現する仕組み

jQuery でローディング画面をフェードアウトし、body タグにクラスを付与。
クラスが付与されたらCSS で画面遷移の動きを表示した後、時間を遅らせてメインコンテンツを出現させる。

[使用するライブラリ]
* jQuery

HTMLの書き方

  1. head終了タグ直前に自作のCSSを読み込みます。
    <link rel="stylesheet" type="text/css" href="css/4-2-2.css">
    </head>
  2. body内の画面遷移を表示させたい場所に以下のHTMLを記載します。
    <div id="splash">
    <div id="splash-logo">ローディング</div>
    <!--/splash--></div>
    <div class="splashbg"></div><!---画面遷移用-->
    <div id="container">
    <p>ここにメインコンテンツが入ります。</p>
    <!--/container--></div>
  3. body 終了タグ直前に jQuery、動きを制御する自作のJS の2 つを読み込みます。
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <!--自作のJS-->
    <script src="js/4-2-2.js"></script>
    </body>

自作のCSS内の書き方


/*========= ローディング画面のためのCSS ===============*/
#splash {
	position: fixed;
	width: 100%;
	height: 100%;
	background: #333;
	z-index: 9999999;
	text-align:center;
	color:#fff;
}

#splash-logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/*========= 画面遷移のためのCSS ===============*/

/*画面遷移アニメーション*/
.splashbg{
    display: none;
}

/*bodyにappearクラスがついたら出現*/
body.appear .splashbg{
    display: block;
    content: "";
    position:fixed;
	z-index: 999;
    width: 100%;
    height: 100vh;
    top: 0;
	left: 0;
    transform: scaleY(0);
    background-color: #333;/*伸びる背景色の設定*/
	animation-name:PageAnime;
	animation-duration:1.2s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;

}

@keyframes PageAnime{
	0% {
		transform-origin:bottom;
		transform:scaleY(0);
	}
	50% {
		transform-origin:bottom;
		transform:scaleY(1);
	}
	50.001% {
		transform-origin:top;
	}
	100% {
		transform-origin:top;
		transform:scaleY(0);
	}
}

/*画面遷移の後現れるコンテンツ設定*/

#container{
	opacity: 0;/*はじめは透過0に*/
}

/*bodyにappearクラスがついたら出現*/
body.appear #container{
	animation-name:PageAnimeAppear;
	animation-duration:1s;
	animation-delay: 0.8s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes PageAnimeAppear{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}

自作のJS内の書き方

$(window).on('load',function(){
$("#splash-logo").delay(1200).fadeOut('slow');//ロゴを1.2秒でフェードアウトする記述

//=====ここからローディングエリア(splashエリア)を1.5秒でフェードアウトした後に動かしたいJSをまとめる
$("#splash").delay(1500).fadeOut('slow',function(){//ローディングエリア(splashエリア)を1.5秒でフェードアウトする記述

$('body').addClass('appear');//フェードアウト後bodyにappearクラス付与

});
//=====ここまでローディングエリア(splashエリア)を1.5秒でフェードアウトした後に動かしたいJSをまとめる

//=====ここから背景が伸びた後に動かしたいJSをまとめたい場合は
$('.splashbg').on('animationend', function() { 
//この中に動かしたいJSを記載
});
//=====ここまで背景が伸びた後に動かしたいJSをまとめる

});

この技術を使ったサンプルサイト

バリエーション
を見る

「機能」に関わる
動き一覧

書籍情報

紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。

もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください!

書籍紙面サンプル

出版社:ソシム株式会社
2021/2/27 発売

書籍紙面サンプル

出版社:ソシム株式会社
2021/7/31 発売

Page
Top