CSS JavaScript

2021.11.12

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

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

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

関連記事

  • 2021.11.02

    CSSのcursor:pointerが効かない時にまず確認したい3つのこと

    CSS

  • 2021.10.01

    【コピペで簡単!】CSSのみで作るシンプルなセレクトボックス(矢印の消し方や枠のサイズ変更方法も解説)

    CSS

  • 2021.09.28

    読み込みが終わったら処理!onloadイベントの使い方と注意点について解説【JavaScript】

    JavaScript

おすすめ記事

  • 2021.05.11

    【おすすめ書籍】この本でゼロからWebサイト制作を学びました

    CSS

    HTML5

  • 2021.09.14

    【薄くて軽い!】超おすすめパソコンスタンド

    その他

  • 2021.09.10

    JavaScriptの基礎をスピーディーに学べる!初心者におすすめの教本を紹介

    JavaScript

WPサービス

×