こだわったNowLoadingは、Webサイトの魅力を引き立たせてくれます。
くるくる回っているだけの無機質なLoading表示ではなく、雰囲気のあるLoading表示を求める人に、
今回は、黒背景のホラー調にピッタリのテイストを書いてみたいと思います。
ソースコード
<div class='loading-horror'>
<span>L</span>
<span>O</span>
<span>A</span>
<span>D</span>
<span>I</span>
<span>N</span>
<span>G</span>
</div>
.loading-horror{
position : absolute;
top : 50%;
left : 50%;
transform : translate(-50%,-50%);
letter-spacing : 10px;
}
.loading-horror *{
font-size : 24px;
font-family : 'Quattrocento Sans', sans-serif;
animation : blur-text 1.5s infinite linear alternate;
}
.loading-horror > *:nth-of-type(1){animation-delay : 0.0s}
.loading-horror > *:nth-of-type(2){animation-delay : 0.3s}
.loading-horror > *:nth-of-type(3){animation-delay : 0.6s}
.loading-horror > *:nth-of-type(4){animation-delay : 0.9s}
.loading-horror > *:nth-of-type(5){animation-delay : 1.2s}
.loading-horror > *:nth-of-type(6){animation-delay : 1.5s}
.loading-horror > *:nth-of-type(7){animation-delay : 1.8s}
@keyframes blur-text {
0% {filter: blur(0px)}
100% {filter: blur(10px)}
}
デモ
LOADING
カスタマイズポイント
HTMLをもっとシンプルに書きたい
上記のHTMLだと、１文字毎に書くのが面倒くさい場合はJavascriptで簡単に自動化させることができます。<script src='horror.js'></script>
<div class='loading-horror'>LOADING</div>
switch(document.readyState){
case 'complete':
every_character()
break
default:
window.addEventListener('load' , every_character)
break
}
function every_character(){
const elm = document.querySelector('.loading-horror')
const strings = elm.textContent
elm.innerHTML = ''
for(const string of strings){
const span = document.createElement('span')
span.textContent = string
elm.appendChild(span)
}
}
cssファイルは全く同じモノを使う事ができるので、Javascriptでカバーしている形になります。
また、scriptタグをheadタグ内に書いても大丈夫なように、onload後に起動するように、書いているので、この書き方はwebページでのjavascript記述で色々と使えるので、知らなかった人は覚えておきましょう！
表示スピードをゆっくりにしたい
<link rel='stylesheet' href='horror.css'>
<link rel='stylesheet' href='slow.css'>
<script src='horror.js'></script>
<div class='loading-horror slow'>LOADING</div>
.loading-horror.slow *{
animation : blur-text 3.0s infinite linear alternate;
}
.loading-horror.slow > *:nth-of-type(1){animation-delay : 0.0s}
.loading-horror.slow > *:nth-of-type(2){animation-delay : 0.6s}
.loading-horror.slow > *:nth-of-type(3){animation-delay : 1.2s}
.loading-horror.slow > *:nth-of-type(4){animation-delay : 1.8s}
.loading-horror.slow > *:nth-of-type(5){animation-delay : 2.4s}
.loading-horror.slow > *:nth-of-type(6){animation-delay : 3.0s}
.loading-horror.slow > *:nth-of-type(7){animation-delay : 3.6s}
animationのduration値を1.5sから倍の3.0sにしてみました。これで、３秒でのF.I. -> F.O.を往復で繰り返してくれるようになります。
そして、delayの値もそれぞれ増やせば、全体的にスローな動きになってくれます。
ついでに黒背景バージョンにしてみました。
LOADING
0 件のコメント:
コメントを投稿