Webサイトのローディングアニメーションの実装
お久しぶりです。
けんたです。
緊急事態宣言が解除されて、いかがお過ごしでしょうか？
私は、リモートの授業というものに人生初参加しておりまして、オンオフの切り替え、モチベーション維持に四苦八苦しております（笑）
さて、話は本題へ。
本日は、WEBサイトで重要な要素であるローディングアニメーションの実装の仕方をまとめました。
サイトに入った瞬間に、始まるグルグルしたやつです。
この実装、以外に簡単なんです↓
手順
では、手順ですが。
ーーーーーーーーーーーーーーーーーーーーーーーーーー
１．フリーのGif画像をダウンロード
２．コンテンツを非表示
３．読み込みが完了したら、Gif画像を隠して、コンテンツを表示
ーーーーーーーーーーーーーーーーーーーーーーーーーーー
これだけです。簡単でしょ？
詳しく行きましょう。
詳細説明
手順１については、こことかいいと思います。
手順2です。
## HTML
<div id="showloading">
<img src="animationGifs/images/icon_loader_b_bb_01_s1.gif">
</div>
<div id="contents" class="hidden">
<img src="../dynamic-portfolio/image/new-mountain2.jpg" alt="">
</div>これが、HTMLの部分です。
2つのdivが用意されていると思いますが、上がGifを格納する領域で、下がWEBサイトのコンテンツを格納する領域です。
下記のCSSでコンテンツ全てを非表示にしています。
## CSS
.hidden{
display: none;
}それ以外のCSSの設定で、画面中央にGifを表示する実装をしています。
## それ以外のCSS
#showloading{
width: 100%;
height: 100vh;
background-color: #fff;
position: relative;
}
#showloading img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}手順3では、Gifの非表示、コンテンツの表示を行います。本来だと、、
画面の読み込みが完了したら、表示の切り替えをして終わりです。
## 生JavaScript
window.onload = function(){
//指定したIDのコンテンツを取得
var contents = document.getElementById("contents");
var loading = document.getElementById("showloading");
//Gifの非表示
loading.style.display = "none";
//コンテンツの表示
contents.style.display = "block";
}ですが、今回はローカルでのテストなので少し工夫します。
window.onload = function(){
setTimeout(function(){
var contents = document.getElementById("contents");
var loading = document.getElementById("showloading");
loading.style.display = "none";
contents.style.display = "block";
},2000);
};setTimeoutという関数を利用して、2秒後に処理を発火させています。
以上で完成です。
お疲れさまです。
今回作った、デモファイルを載せておきます。
Gif画像のパスは適宜変えてください。
Gif画像の作り方
あ、最後に今回のでも動画Gifは、gifsというWEBサービスで作らせていただきました。フリップを入れたり、長さを調整したり便利なので是非使ってみてください。(※会員登録必須)
では、今日はこの辺りで。