【コピペ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つ順番に表示させるというアニメーションを記述します。

文章が長い場合のタイピングアニメーション

サンプルコードは、文章が長い場合でも対応しています。

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

word-break : break-all;を指定しておかないと、タイピング途中でカクカクと動いてしまいますのでご注意ください。

英語だと単語の途中で改行されてしまうのがデメリットです。

JavaScriptとCSSでタイピングアニメーションを実装する方法まとめ

見出しでも文章でも、さまざまなところで使えるアニメーションです。

ご紹介したサンプルコードはコピペですぐにご利用いただけるのでぜひご活用ください!

この記事をシェアする

関連記事

  • 2023.12.30

    案件を切り替える拡張機能「Project Manager」が便利!

    コーディング

  • 2023.12.29

    記事タイトルを行数で制御するCSS

    CSS

    コーディング

  • 2023.12.29

    CSSのホバーを工夫するようになった話

    コーディング

    制作

おすすめ記事

  • 2022.04.22

    【動画編集ソフト】アフターエフェクトとプレミアプロってなにが違うの?違いと使い分けを解説!

    制作

    動画

  • 2022.04.28

    【カメラ初心者向け】物撮りが上手くなるコツ ~食べ物編~

    その他

    制作

  • 好きなフォントは?現役WEBデザイナーに聞いてみた!

    2022.06.01

    デザイナーなら好きなフォントの1つや2つあるでしょ?現役WEBデザイナーに好きなフォント聞いてみた!

    デザイン

    制作

×