X
  1. TOP
  2. 【コピペOK】JavaScriptとCSSでタイピングアニメーションを実装
2024.06.18

【コピペ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でタイピングアニメーションを実装する方法まとめ

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

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

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

この記事をシェアする

関連記事

おすすめ記事

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

© 2020 spiqa design

×