【jQuery/CSS】複数のローディングアニメーションを付ける

こんにちは！セミマサです。

最近は凝ったアニメーションがついているサイトが多いですよね。私もアニメーションのついたサイトを作ってみたくなったので複数のローディングアニメーションを付けたデモサイトを作成してみました。

デモサイト
HTML
CSS
jQuery
おわりに

デモサイト

今回のデモサイトです。

読み込み演出→画面が開くアニメ→セミ君が回転しながら登場→吹き出しと記事へ戻るボタンが登場という流れになっています。デモページは軽いので読み込み演出は一瞬で終わってしまいますね…

デモサイトへ(現在のタブで開きます)

※うまく動かない場合画面を更新してみてください！正常に動いている場合は下の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クラスを付与。