これなら実装がすごく簡単！タイプライターのようにテキストを表示するアニメーションを実装できるスクリプト typewritten-text

テキストをHTMLのタグ（カスタム要素）で囲むだけで、タイプライターのアニメーションを簡単に実装できるスクリプトを紹介します。

外部ファイルを記述し、あとは<p>内でも<h1>内でもタイプライターのアニメーションを適用できます。HTMLなので、<strong>や<em>を併用したり、CSSでスタイルを定義することも簡単です。
HTMLなので、もちろん日本語のテキストでも大丈夫です。

typewritten-text
typewritten-text -GitHub

• typewritten-textの特徴
• typewritten-textのデモ
• typewritten-textの使い方

typewritten-textの特徴

typewritten-textはHTMLのカスタム要素で、タイプライターのアニメーションを簡単に実装できます。

• HTMLのカスタム要素（<typewritten-text>）でタイプライターのアニメーションを実装できます。
• カスタム要素は標準のHTMLタグと同じように使用できます。
• 標準のHTMLタグと同じなので、状態に関係なくテキストコンテンツを表し、アクセシブルです。
• CSSも標準のHTMLタグと同じように定義できます。
• ISC Licenseで、商用プロジェクトでも無料で利用できます。
  ※BSD 2-ClauseおよびMITライセンスと機能的に同等です。

See the Pen
Typewriter Cycle by Timothy Foster (@auroratide)
on CodePen.

HTML Living StandardではWebコンポーネントを介して独自のHTML要素（カスタム要素）を定義して使用でき、JavaScriptで新しい要素を作成するだけで機能します。

Webコンポーネントはブラウザのネイティブな機能なので、他のフレームワークと共存できます。
参考: Custom Elements Everywhere

typewritten-textのデモ

デモでは、タイプライターのようにアニメーションで表示されるテキストを楽しめます。オプションでタイプの速度や繰り返し、リピートして逆戻しなども楽しめます。

typewritten-text

会話コンテンツにもいいですね。

See the Pen
Typewriter Dialog by Timothy Foster (@auroratide)
on CodePen.

typewritten-textの使い方

Step 1: 外部ファイル

当JavaScriptとCSSを外部ファイルとして記述します。

Step 2: HTML

タイプライターのアニメーションを適用するテキストを<typewritten-text>で囲むだけで完了です。

<typewritten-text>は単なるHTMLであるため、他のHTMLタグも使用できます。

オプション

タイプライターのさまざまなアニメーションも用意されています。
タイプライターのエフェクトを永遠に繰り返す。

タイプライターの各文字間の時間を調整する。

タイプライターの一時停止。

また、<typewritten-text>は単なるHTMLであるため、他のHTMLタグと同様にCSSでスタイルを与えることができます。