こんにちは!セミマサです。
最近は凝ったアニメーションがついているサイトが多いですよね。私もアニメーションのついたサイトを作ってみたくなったので複数のローディングアニメーションを付けたデモサイトを作成してみました。
デモサイト
今回のデモサイトです。
読み込み演出→画面が開くアニメ→セミ君が回転しながら登場→吹き出しと記事へ戻るボタンが登場という流れになっています。デモページは軽いので読み込み演出は一瞬で終わってしまいますね…
※うまく動かない場合画面を更新してみてください!正常に動いている場合は下のgifのようになります。

HTML
<div id="loader-bg">
<img src="img/load.gif">
</div>
<div class="load-effect" id="loader-head"></div>
<div class="load-effect" id="loader-foot" ></div>
<div id="semikun"></div>
<div id="semikun-talk">今日もwebでセミが鳴くへ<br class="br-sp">ようこそ!</div>
<a href="https://semimasa.com/loading/" id="back">記事へ戻る</a>
今回のHTMLです。
CSS
body.lock{
overflow: hidden;
touch-action: none;
}
#loader-bg {
background: #fff;
height: 100%;
width: 100%;
position: fixed;
top: 0px;
left: 0px;
z-index: 10; }
#loader-bg img {
background: #fff;
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 10; }
.load-effect{
display: block;
position: fixed;
width: 100vw;
height: 100vh;
z-index: 5;
background-color: dodgerblue;
transition: 1.5s ease-in-out;
}
#loader-head{
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#loader-foot{
bottom: 50%;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%);
}
#loader-head.is-active{
top: 0;
opacity: 0;
height: 20vh;
z-index: -2;
}
#loader-foot.is-active {
bottom: 0;
opacity: 0;
height: 20vh;
z-index: -2;
}
#semikun{
background-image: url(../img/semimasa.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
width: 1536px;
height: 1536px;
position: absolute;
opacity: 0;
top: 0;
right: 0;
display: block;
transition: 2s ease-in-out;
transform: rotate(270deg);
}
#semikun.is-active{
top: 50%;
left: 50%;
width: 128px;
height: 128px;
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg);
-ms-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
z-index: 5;
}
#semikun-talk{
opacity: 0;
position: absolute;
top: 40%;
left: 50%;
width: 50vw;
text-align: center;
padding: 8px;
border: solid 1px #ccc;
border-radius: 8px;
-webkit-border-radius:8px;
-ms-border-radius:8px;
background-color: #fff;
transition: 1.5s ease-in-out;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
#semikun-talk.is-active{
opacity: 1;
top: 30%;
}
#back{
display: block;
opacity: 0;
padding: 8px;
position: absolute;
top: 75%;
left: 50%;
font-size: 1.2rem;
color: black;
border-radius:8px;
background-color: dodgerblue;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transition: ease-in-out .5s;
-webkit-border-radius:8px;
-ms-border-radius:8px;
}
#back.display{
opacity: 1;
}
#back.display:hover {
opacity: .7;
}
今回のCSSになります。読み込み演出はgif画像を使っていますが、他のアニメーションはCSSのtransformプロパティとtransitionプロパティを利用してつけています。
・bodyにlockクラスが付与されている間は overflow: hidden;とtouch-action: none;が適用され、画面のスクロールができなくなります。
jQuery
<script>
$(window).on('load', function() {
$('#loader-bg').hide();
$('.load-effect').addClass('is-active');
});
$('#loader-head').on('transitionend', function () {
$('#semikun').addClass('is-active');
});
$('#semikun').on('transitionend', function () {
$('#semikun-talk').addClass('is-active');
$('body').removeClass('lock');
$('#back').addClass('display');
});
</script>
今回のjQueryです。動作について順番に解説していきます。
①:jQueryのload関数を使い、画面の読み込みが終わった時に下記二つの処理をします。
・#loader-bgをhideメソッドで隠す。
・load-effectクラスを持った要素にis-activeクラスを付与。
②:CSSアニメーションの終了を検知するtransitonendイベントを用いて画面が開くアニメーションが終わった時に#semikunにis-activeクラスを付与しています。
③:②と同様にセミ君のアニメーションが終わった時に下記3つの処理をします。
・#semikun-talkにis-activeクラスを付与。
・bodyからlockクラスを取り除く。
・ #backにdisplayクラスを付与。
おわりに
無事に複数のローディングアニメーションを付けたサイトを作ることができました。ポイントは transitionendイベントですね!
読み込み中に表示しているgif画像は下記のサイトで作成しました。