アニメーション コーディング

【ローディングアニメーションをつくってみよう】

2022年4月30日

アニメーションはユーザーに
「退屈にさせない、ストレスを与えない、飽きさせない」
などの効果をもたらせます。

サイトのロード時間が3秒以上あるとユーザーの半分が離脱すると言われています。
ローディングアニメーションをつかってサイトのUXを高めていきましょう。
基本的には以下のコードをコピペすれば、簡単に実装できます。

ローディング画面をつくってみよう

今回はCSSとjQueryを使ってローディングアニメーションを作っていきます。
まずは以下が完成形となります。

ファイル階層は以下のとおりです

 

jQueryを本体を読み込む

はじめに、ローディング画面を閉じる処理に必要なjQuery本体を読み込みます。
今回はCDNで読み込む方法で使用しますので、以下をbodyの閉じタグの前に記述してください。
またその下に自作で記述するscript.jsファイルを設置します。

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="script.js"></script>

※右上の矢印ボタンを押すとソースをコピーできます。

 

HTHML

HTMLを記述していきます。以下を貼り付けてください。

<!--ローディング画面  -->
  <div id="load">
    <div class="load-animation"></div>
  </div>

<!-- コンテンツ部分 -->
  <div class="content">
    <p class="text">ここはローディング後の画面です</p>
  </div>

 

CSS

CSSを記述していきます。以下を貼り付けてください。

/* アニメーション画面 */

#load {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #2DA1D9;
  width: 100vw;
  height: 100vh;
  transition: opacity 0.3s , visibility 0.3s;
  z-index: 10000;
}

/* アニメーション本体 */

.load-animation {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 60px;
  height: 60px;
  background-color: #D3C534;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@keyframes sk-rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

/* コンテンツ部分 */

body {
  background: #cfcfcf;
}

.content {
  margin: 0 auto;
  width: 700px;
  text-align: center;
}

.text {
  font-size: 24px;
  text-align: center;
  background: #83c3d5;
  display: inline-block;
  padding: 30px;
  margin-top: 400px;
  color: #fff;
}

/* 画面を閉じる処理 */

#load.close {
  visibility: hidden;
  opacity: 0;
}

CSSで、#loadにcloseクラスが付与すると
ローディングアニメーションを非表示にする指定をしています。

 

jQuery

最後にjQueryを記述します。

$(window).on("load", function () {
  $("#load")
    .delay(1500)
    .queue(function () {
      $(this).addClass("close").dequeue();
    });
});

上記は画面の読み込みから、1.5秒後に#loadにcloseクラスを付与するという式です
delayメソッドを使用することでイベントの発生を遅らせているイメージですね。
秒数の指定は3行目で変更可能。

また上記のquery部分は以下の式でも同じ動きになります。
setTimeoutもイベントを遅らせるメソッドです。

$(window).on("load", function () {
  setTimeout(function () {
    $("#load").addClass("close");
  }, 1500);
});

 

まとめ

いかがでしょうか。
基本的にはCSSでアニメーションの動きを作り、
JQueryで画面の切り替えを行うという指示をしています。

jQueryの動きをしっかり押さえていれば、様々なアニメーションを作れます！

 

ローディングアニメーションの参考サイト① についてはこちら

ローディングアニメーションの参考サイト② についてはこちら

-アニメーション, コーディング