【コピペOK】JavaScriptとCSSでタイピングアニメーションを実装

コーディング

今回は、キーボードでタイピング入力されているようなアニメーションの実装方法をご紹介します。

タイピングのように表示されていくととてもインパクトがあるのでテキストを目立たせたい時におすすめです！

コピペで使えるサンプルコードを用意しましたので、それをもとにわかりやすく解説していきます。

タイピングアニメーションのサンプルコード

それでは、さっそくタイピングアニメーションを見てみましょう。
※Codepen右下の「Rerun」をクリックすると再生されます。

See the Pen typing3 by spiqa design (@spiqa_design) on CodePen.

タイピングされるように「Stay out my of my territory.(私のシマから出ていけ)」と表示されました。

これは最近イッキ見した海外ドラマ「Breaking Bad」の名言ですが、タイピングで表示されることで一層迫力があります…

それでは、各言語ごとに解説していきます！

HTMLのコード解説

<div class="wrap">
  <p class="typing">Stay out of my territory.</p>
</div>

HTMLはとてもシンプルです。

重要なのは、タイピングさせたい要素に、typingクラスを指定します。

このクラスをJavaScriptに渡してアニメーションを実装します。

CSSのコード解説

/*タイピング*/
.typing {
  font-size: 16px;
  letter-spacing: 0.2em;
  word-break : break-all;
}

/*jsで生成されるspanタグ*/
.typing span{
    display: none;
}

typingが指定している要素内のspanタグをdisplay: none;にしておきます。

HTMLではspanタグを書いていませんが、JavaScriptで生成します。

/*|カーソルを表示*/
.typing:after {
  content: "|";
  animation: typingCursor .8s ease infinite;
}

@keyframes typingCursor {
  from　{
    opacity:0;
  }
  to{
    opacity:1
  }
}

タイピングカーソルを擬似要素で表示させます。

点滅アニメーションはCSSアニメーションで実装します。

タイピングアニメーションはこのカーソルが必要不可欠です！

JavaScriptのコード解説

 //テキストごとにspanタグを生成する
  var element = $(".typing");
  var thisChild = ""
  element.each(function () {
    var text = $(this).html();
    var textbox = "";
    text.split('').forEach(function (target) {
      if (target !== " ") {
        textbox += '<span>' + target + '</span>';
      } else {
        textbox += target;
      }
    });
    $(this).html(textbox);
  });

typingクラスが指定されている要素を取得し、要素ないのテキストごとにspanタグを囲っていきます。

  // タイピングアニメーション
   $(element).each(function () {
      thisChild = $(this).children(); //生成したspanタグを取得
      thisChild.each(function (i) {
        var time = 100;
        $(this).delay(time * i).fadeIn(time);
      });
  });

その後、生成したspanタグを取得して1つ1つ順番に表示させるというアニメーションを記述します。