タイピング風なローディング画面

ロッチくん

ローディング画面でタイトル表記をタイピング風に表示したいニャ

以前書いた記事が私のポートフォリオで使用されていたものをサンプルサイトとして使用していたのですが、紹介したコードだけでは足りない部分も多かったので、今回あらためてデモページを作成し解説しています。内容は基本的に変わりません。

ローディング画面でタイトルやロゴを表記させるのは珍しくありませんが、今回はタイピング風に一文字ずつ入力されていくアニメーションを紹介します。

実装したいサンプル
コード
最後に

実装したいサンプル

こちらに今回実装したいページのデモページを作りましたのでご覧ください。

まずはいつも通りにjQueryを読み込みます。もし読み込み方法が不明でしたら、以下ページを参照して下さい。

jQueryの読み込み方法

jQueryを読み込むにはダウンロードしてサーバーにアップロードする方法とCDNで読みこむ方法とありますが、ここでは手軽にすぐ読み込めるCDNを使った方法を紹介します。

また今回はタイプライター風のフォントも使用しますので以下のGoogleフォントも読み込みましょう。
読み込み場所は自作のcssの上がよいでしょう。

<link
    href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Noto+Sans+JP:wght@400;500;700&family=Special+Elite&display=swap"
    rel="stylesheet">

準備が整いましたら具体的なコードを見て行きます。

コード

HTML

<div class="loading-bg">
    <div class="loading-animation-text">
        <p>Typing style loading screen</p>
    </div>
</div>

<div class="wrapper">
    <div class="mainVisual">
        <h1>Typing style loading screen</h1>
    </div>
    <div class="container">
        <section>contents1</section>
        <section>contents2</section>
        <section>contents3</section>
    </div>
</div>

CSS

body {
  font-family: "Special Elite", cursive;
}
.wrapper {
  width: 100%;
}
.mainVisual {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(./images/fv-image_02.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
h1 {
  font-size: 1.4rem;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.75);
}
.container {
  max-width: 1000px;
  padding: 0 15px; 
  margin: 0 auto;
}
section {
  background-color: rgb(126 121 195);
  width: 100%;
  height: 500px;
  border-radius: 15px;
  margin: 50px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 1.8rem;
}

/*========= Loading ===============*/

.loading-bg {
  width: 100%;
  height: 100vh;
  background-color: #333;
  position: fixed;
  top: 0;
  left: 0;
}

.loading-animation-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 15em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  font-size: 2.8rem;
  line-height: 1.2;
  z-index: 6;
  font-family: "Special Elite", cursive;
  color: rgba(255, 255, 255, 0.75);
  border-right: 2px solid rgba(255, 255, 255, 0.75);
  animation: typewriter 4s steps(40) 1s 1 normal both,
    blinkTextCursor 500ms steps(40) infinite normal;
}

@keyframes typewriter {
  from {
    width: 0;
  }
  to {
    width: 15em;
  }
}
@keyframes blinkTextCursor {
  from {
    border-right-color: rgba(255, 255, 255, 0.75);
  }
  to {
    border-right-color: transparent;
  }
}


/*========= スマホ用 ===============*/

@media screen and (max-width: 768px) {
  h1 {
    font-size: 1.4rem;
    }
  .loading-animation-text {
    font-size: 1.4rem;
    }
  
}

今回のタイプライター風のローディングの画面の主なところは

/========= Loading ===============/

以下のところになります。

JavaScript

$(function() {
  $(".loading-bg").delay(4000).fadeOut(4000);
});

ちょこっと解説

動きのわりに案外簡単なkeyframesとanimationで実装されているのがわかると思います。

肝となるのが文字と右の線を点滅させるのに用いたstepsという animation-timing-function でしょうか。

animation-timing-function が steps(40) となっているため、textと右の border-right の線が1回のアニメーション周期が完了するまでの所要時間に４０回コマ送りのように点滅しながら、アニメーションすることでまるでタイプライターのような効果が実装されています。