MENU

JavaScriptなし！HTML/CSSのみで作るロゴのローディングアニメーション

広告
Webアニメーション
masu
HTML/CSSのみで作るロゴのローディングアニメーション

JavaScriptなしでシンプルなHTML/CSSのみで、ロゴのローディングアニメーションを実装する方法をご紹介しています。

ローディングを実装するにはたくさんの方法がありますが、正直なところ実務ではこの方法で十分だったりします。

工数もほとんどかからないので、サクッと実装することができますよ。

目次

ロゴのローディングアニメーションを実装した例

今回実装したのはこちらです。

デモページ

とてもシンプルなローディングアニメーションです。仕様は以下の通りです。

  1. 白い背景が表示される
  2. ロゴが下から移動しながら表示され、しばらくするとゆっくりと消える
  3. 白い背景がゆっくりと消えて、サイトのコンテンツが表示される

用意したファイルは以下の通りです。

ファイル一式
  • index.html
  • style.css

コードの見本

以下がHTML/CSSのコードです。コピペして画像のパスを変更するとそのまま使えると思います。

index.html

<div class="loading">
    <img class="loading__logo" src="./images/logo.png" alt="VOOL">
</div>

style.css

.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeOut 1.5s 2.5s forwards;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

.loading__logo {
  opacity: 0;
  animation: logo_fade 2s 0.5s forwards;
  width: 175px;
}

@keyframes logo_fade {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  60% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
  }
}

表示されるロゴの大きさを変えるにはloading__logoクラスのwidthプロパティを変更してください。

CSSの解説

CSSを中心にコードの解説をします。

背景の動き

横幅、高さが画面いっぱいの背景色を用意しておいて、アニメーションfadeOutでopacityを0から1に1.5秒かけて変化させています。

すぐに変化が始まるとロゴ画像が見えなくなってしまうため、2.5秒の遅延をつけています。

ロゴの動き

アニメーションlogo_fadeでopacityとtransformプロパティを2秒かけて変化させています。

@keyframes logo_fade {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  60% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
  }
}

keyframesで0%、60%、100%の値をそれぞれ指定することで、「移動しながら表示されてその後消える」動きを表現しています。

こちらも0.5秒の遅延時間を設定しています。

JavaScriptなしでローディングアニメーションを作るメリット

JavaScriptなしでローディングを作ることのメリットをまとめてみました。

①軽量で読み込みが速い

JavaScriptのコードをダウンロードして実行する必要がないので、非常に軽量で高速です。ただあまり体感できる違いではないかもしれません。

②開発や保守を簡素化できる

こちらのメリットの方が大きいと感じています。

JavaScriptを使用せずにアニメーションを作成することで、開発プロセスが簡素化されます。アニメーションがCSSに組み込まれているため、ソースコードがシンプルになり、保守や変更が容易になります。

一方で、 JavaScriptを使うことでもっと複雑なローディング画面を作成することができ、よりリッチなWebサイトを演出することもできます。

初回読み込み時のみローディングを表示させるような場合も、CSSでは実装が難しいのでJavaScriptが必要です。Webサイトの目的に応じて使い分けるのがいいかもしれません。

最後までお読みいただきありがとうございます！

Webアニメーション
目次