【JavaScript】タイピングアニメーションを実装する方法

今回はJavaScriptでタイピングアニメーションを実装する方法をご紹介します。

この記事は以下のお悩みを解決します。

1. タイピングアニメーションとは

タイピングアニメーションはPCで文字を打ち込む時のように左から右に向かって文字が1文字ずつ表示されるアニメーションです。

タイピングアニメーションはHTML、CSS、JavaScriptで実装することができます。

JavaScriptのライブラリ「iTyped.js」を使っても作成できますが、今回はライブラリなしで実装する方法をご紹介します。

2. タイピングアニメーションの実装方法

タイピングアニメーションのコードは以下のようになります。「Run Pen」を押してアニメーションを確認してみてください。

See the Pen Untitled by Hiro (@Coffee1610) on CodePen.

2-1. HTMLのコード解説

<div class="typing-animation"></div>

1行目：<div class=”typing-animation”></div>

文字を表示するためのdiv要素を用意します。

2-2. CSSのコード解説

.typing-animation::after {
  content: '';
  border-right: 1px solid #333;
  margin-left: 2px;
  animation: flashing 1s linear infinite;
  opacity: 0;
}

@keyframes flashing {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

1-7行目：.typing-animation::after {~}

Codepenのエディタでアニメーションの動きを見ていただけるとわかると思うのですが、文字の右端に入力カーソルの縦棒が表示されています。typing-animationクラスの疑似要素で入力カーソルの縦棒を表現しています。

9-16行目：@keyframes flashing{~}

入力カーソルを点滅させるためのアニメーションを定義しています。

2-3. JavaScriptのコード解説

const typing = (el, sentence) => {
　　 //文字列を１文字ずつ取り出して処理を実行する
    [...sentence].forEach((char, index) => {
　　　//0.1秒ごとに文字を出力する
      setTimeout(() => {
        document.querySelector(el).textContent += char;
      }, 100 * ++index);
    });
 }

//関数を呼び出す
typing('.typing-animation', 'Hello! Nice to meet you!');

1-9行目：const typing = (el, sentence) => {~};

typing関数の第１引数のelは文字を表示するためのHTMLタグのクラス名、第２引数のsentenceは実際に表示する文字列です。

3-8行目：[…sentence].forEach((char, index) => {~});

[…sentence]はsentence(文字列)をスプレッド演算子を使って文字列を1文字ずつ入った配列を作成します。

ここではsentenceには「Hello! Nice to meet you!」という文字列が入るので[…sentence]は以下のようになります。

['H','e','l','l','o','!',' ','N','i','c','e',' ','t','o',' ','m','e','e','t',' ','y','o','u','!']

[…sentence]をforEachで１文字ずつ取り出して処理を実行します。第１引数のcharは取り出した文字、indexはインデックス番号が入ります。

5-7行目：setTimeout(() => {document.querySelector(el).textContent += char;}, 100 * ++index);

setTimeout(()=>{})では0.1秒ごとにdocument.querySelector(el).textContentでel(.typing-animation)にforEachで取り出した文字を１文字ずつ追加します。

14行目：typing(‘.typing-animation’, ‘Hello! Nice to meet you!’);

typing関数を呼び出しています。

3. まとめ

今回はJavaScrptでタイピングアニメーションを作る方法をご紹介しました。少しでもお役に立てたら幸いです。