こんにちは、コンスキです。
ページを読み込む前にローディング画面が表示されるサイトってありますよね。
ローディングがあれば、ページの読み込みに時間がかかってその間に不完全なページが表示されるということがなくなります。
せっかくページを作り込んであっても、不完全なページが表示されると印象が悪いですよね。
あと、ローディング画面があるサイトは数少ないと思います。
あまりないからこそ、ローディング画面が表示されただけで、「このサイトなんかすごそう！」と思っちゃいませんか？（僕だけかもしれませんが・・・）
そこで、今回はCSSを使ってローディング画面を作っていこうと思います。
参考にした動画
ローディング画面を作成するにあたり、次の動画を参考にさせていただきました。
とても丁寧に解説されているので、ぜひご覧ください。
アニメーションを作る
ロディング画面のアニメーションに関しては、上の動画と全く同じものにしました。
HTMLのスクリプトは次のようになっています。
<div class="wrap">
<div class="loading_inner">
<img src="./img/about.png">
<p>
<span>loading...</span>
</p>
</div>
</div>画像以外は動画内で説明していただいているスクリプトと同じです。
スクリプトの詳しい説明に関しては、動画の中でわかりやすく説明されているので動画をご覧ください。
CSSは次のようになります。
.wrap {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #EBB754;
transition: all 1s ease;
z-index: 1000;
}
.loading_inner {
text-align: center;
}
.loading_inner img {
width: 160px;
animation: loading_anime 1s infinite;
}
.loading_inner p {
letter-spacing: 0.15em;
font-size: 13px;
font-weight: bold;
color: #707070;
}
.loading_inner span {
display: inline-block;
position: relative;
overflow: hidden;
}
.loading_inner span::before {
content: "";
position: absolute;
background-color: #EBB754;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: block;
animation: text_anime 3s infinite;
}
@keyframes loading_anime {
0% {
transform: scale(1.0, 1.0) translate3d(0, 0, 0);
}
30% {
transform: scale(1.0, 1.06) translate3d(-3%, -2%, 0) skew(4deg, 0deg);
}
45% {
transform: scale(1.0, 0.97) translate3d(-1%, -1%, 0) skew(1deg, 0deg);
}
75% {
transform: scale(1.0, 1.06) translate3d(-3%, -2%, 0) skew(-4deg, 0deg);
}
90% {
transform: scale(1.0, 0.97) translate3d(1%, 1%, 0) skew(-1deg, 0deg);
}
100% {
transform: scale(1.0, 1.0) translate3d(0, 0, 0);
}
}
@keyframes text_anime {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(100%);
}
}読み込みが終わった後にローディング画面が徐々に消えるようにするために、2〜4行目については動画内のコードとは異なっています。
読み込みが終わったらローディング画面を消す
アニメーションを作っただけだと、ページの読み込みが終わってもアニメーションが表示され続けてしまいます。
そこで、次のようにして、読み込みが終わったらローディング画面を非表示にします。
window.onload = function() {
const loading = document.getElementsByClassName('wrap');
loading[0].classList.add('loaded');
}「window.onload = 関数」のようにして書いた場合、画像やCSSなどの読み込みが終わってから関数が実行されます。
これを利用して、読み込みが終わったら、「loaded」と言うclassをローディング画面を構成している要素に対してつけます。
また、loadedというclass名がついている要素に対して、次のようにCSSを設定します。
このCSSを効かせることで、ローディング画面が見えなくなります。
.loaded {
opacity: 0;
visibility: hidden;
}ローディング画面が表示されて少しするとこんな感じ↓に消えます。
最後に
僕の環境だと、このサイトを読み込む時間は1秒もかかりません。
そのため、ローディング画面がほんの少しの間しか表示されません。
上の動画では、ローディング画面が表示されて少ししたら消えるということをわかりやすくするために、わざと読み込みに時間がかかるように設定しています。
「読み込みに時間が掛からなければ、そもそもローディング画面を設定する必要がないじゃん」と思いますよね。
実際はそうなんですが、このサイトを見る際の環境や端末によっても読み込み時間は変わるので一応ローディング画面をつけました。
コメント