画面遷移
-背景色が円形に縮小(中央へ)-
See the Pen 4-2-8 背景色が円形に縮小(中央へ) by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.
「Result」下のRerunを押して動きを確かめてね!↑
動きを実現する仕組み
jQuery を使い、ローディング画面をフェードアウトしたらbody タグにクラスを付与。
CSS のアニメーションで画面遷移の動きを表示した後、時間を遅らせてメインコンテンツを出現させる。
[使用するライブラリ]
* jQuery
HTMLの書き方
- head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/4-2-8.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-8.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{
display: none;
content: "";
position:fixed;
transform: scale(100);
background-color: #333;/*伸びる背景色の設定*/
z-index: 999;
/*丸のスタートの形状*/
top:calc(50% - 1rem);/*50%から円の半径を引いた値*/
left:calc(50% - 1rem);/*50%から円の半径を引いた値*/
width: 2rem;
height: 2rem;
}
/*bodyにappearクラスがついたら出現*/
body.appear .splashbg{
display: block;
border-radius: 50%;
animation-name:PageAnime;
animation-duration:1s;
animation-fill-mode:forwards;
}
@keyframes PageAnime{
0% {/*丸のスタート位置と形状*/
transform: scale(100);
}
100% {/*丸の終了位置と形状*/
transform: scale(0);
display: none;/*終了時は消える*/
}
}
/*画面遷移の後現れるコンテンツ設定*/
#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をまとめる
});
この技術を使ったサンプルサイト
バリエーション
を見る
「機能」に関わる
動き一覧
基礎から学びたい方へ
Webサイトの動きを実現する仕組みと
準備について基礎から学びたい方は
下記をまず読み、基本を理解してから
コピペしましょう
Webサイトの動きを
実現する仕組みと準備
書籍情報
紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。
もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください!