画面遷移
-背景色が四角に拡大(四隅へ)-
See the Pen 4-2-9 背景色が四角に拡大(四隅へ) by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.
「Result」下のRerunを押して動きを確かめてね!↑
動きを実現する仕組み
jQuery を使い、ローディング画面がフェードアウトしたらbody にクラスを付与。
また、画面遷移用の<div>にブラウザの高さ分のborderを指定し、CSS アニメーションの定義名を追加。
CSS のアニメーションで、borderの太さを変化させ、時間を遅らせてメインコンテンツを出現させる。
[使用するライブラリ]
* jQuery
HTMLの書き方
- head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/4-2-9.css"> </head>
- body内の画面遷移を表示させたい場所に以下のHTMLを記載します。
<div id="splash"> <div id="splash-logo">ローディング</div> <!--/splash--></div> <div class="splashbg"></div> <!---画面遷移用--> <div id="container"> <p>ここにメインコンテンツが入ります。</p> <!--/container--></div>
- 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-9.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 ===============*/
/*画面遷移アニメーション*/
body{
background:#333;/*遷移アニメーションと同じ色を指定*/
}
body.appear{
background:#fff;/*画面を開いた後の背景色を指定*/
}
.splashbg{
position: fixed;
top: 0;
right:0;
bottom:0;
left: 0;
border-width: 0px;/*開始はボーダーの太さは0*/
border-style:solid;
border-color: #666;/*拡大する四角の色*/
animation-duration:.5s;
animation-fill-mode:forwards;
}
@keyframes backBoxAnime{
99.9% {/*アニメーション終了ぎりぎりまで*/
z-index: 2;/*最前面に*/
border-width: 0px;/*開始はボーダーの太さは0*/
}
100%{
z-index: -1; /*最背面に*/
border-width: 0px;/*終了はボーダーの太さは0*/
}
}
/*画面遷移の後現れるコンテンツ設定*/
#container{
position: relative;
opacity: 0;/*はじめは透過0に*/
}
/*bodyにappearクラスがついたら出現*/
body.appear #container{
animation-name:PageAnimeAppear;
animation-duration:1s;
animation-delay:0.2s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes PageAnimeAppear{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
自作のJS内の書き方
$(window).on('load',function(){
$("#splash").delay(1500).fadeOut('slow',function(){//ローディングエリア(splashエリア)を1.5秒でフェードアウトする記述
$('body').addClass('appear');//フェードアウト後bodyにappearクラス付与
var h = $(window).height();//ブラウザの高さを取得
$(".splashbg").css({
"border-width":h,//ボーダーの太さにブラウザの高さを代入
"animation-name":"backBoxAnime"//animation-nameを定義
});
});
$("#splash-logo").delay(1200).fadeOut('slow');//ロゴを1.2秒でフェードアウトする記述
});
この技術を使ったサンプルサイト
バリエーション
を見る
「機能」に関わる
動き一覧
基礎から学びたい方へ
Webサイトの動きを実現する仕組みと
準備について基礎から学びたい方は
下記をまず読み、基本を理解してから
コピペしましょう
Webサイトの動きを
実現する仕組みと準備
書籍情報
紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。
もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください!