[CSS] NowLoading「ホラー調」

2023年2月9日

CSS

eyecatch こだわった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だと、1文字毎に書くのが面倒くさい場合は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にしてみました。これで、3秒でのF.I. -> F.O.を往復で繰り返してくれるようになります。 そして、delayの値もそれぞれ増やせば、全体的にスローな動きになってくれます。 ついでに黒背景バージョンにしてみました。
LOADING

あとがき

今回はさほど難しいテクニックではない表示でしたが、雰囲気にあったパーツとして使ってください。 文字を変更してもいい感じの表現ができそうですね。 以上、ホラー映画が大好きなユゲタでした。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。