<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
</script>
<style>@charset "utf-8";
/*========= ローディング画面のための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: #d22;/*伸びる背景色の設定*/
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:2s;
animation-fill-mode:forwards;
}
@keyframes PageAnime{
0% {/*丸のスタート位置と形状*/
transform: scale(100);
}
60% {/*丸の形状が一旦止まる*/
transform: scale(10);
}
80% {/*丸の形状が一旦大きくなる*/
transform: scale(30);
}
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;
}
}
/*========= レイアウトのためのCSS ===============*/
h1{
font-size:1.2rem;
}
h2{
font-size:1.2rem;
text-align: center;
margin: 0 0 30px 0;
}
p{
margin-top:20px;
}
small{
color:#fff;
display: block;
text-align: center;
}
#header{
background:#333;
color:#fff;
text-align: center;
padding: 20px;
}
section{
padding:100px 30px;
}
section:nth-child(2n){
background:#f3f3f3;
}
#footer{
background:#333;
padding:20px;
}</style>
</head>
<body>
<div id="splash">
<div id="splash-logo">読み込み中</div>
<!--/splash-->
</div>
<div class="splashbg">
</div>
<!---画面遷移用-->
<div id="container">
<header id="header">
<h1>Logo</h1>
</header>
<main>
<section>
<h2>Area 1</h2>
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
<!--/area1-->
</section>
<section>
<h2>Area 2</h2>
<!--/area2-->
</section>
<section>
<h2>Area 3</h2>
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
<!--/area3-->
</section>
<section>
<h2>Area 4</h2>
<!--/area4-->
</section>
<section>
<h2>Area 5</h2>
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
<!--/area5-->
</section>
<!--/main-->
</main>
<footer id="footer">
<small>© copyright.</small>
</footer>
<!--/container-->
</div>
<script>$(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をまとめる
});
//# sourceURL=pen.js</script>
</body>
</html>