JavaScriptなしでシンプルなHTML/CSSのみで、ロゴのローディングアニメーションを実装する方法をご紹介しています。
ローディングを実装するにはたくさんの方法がありますが、正直なところ実務ではこの方法で十分だったりします。
工数もほとんどかからないので、サクッと実装することができますよ。
ロゴのローディングアニメーションを実装した例
今回実装したのはこちらです。
とてもシンプルなローディングアニメーションです。仕様は以下の通りです。
- 白い背景が表示される
- ロゴが下から移動しながら表示され、しばらくするとゆっくりと消える
- 白い背景がゆっくりと消えて、サイトのコンテンツが表示される
用意したファイルは以下の通りです。
- 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;
}
}
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サイトの目的に応じて使い分けるのがいいかもしれません。
最後までお読みいただきありがとうございます!