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

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

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

テキストをHTMLのタグ(カスタム要素)で囲むだけで、タイプライターのアニメーションを簡単に実装できるスクリプト typewritten-text

typewritten-text
typewritten-text -GitHub

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でスタイルを与えることができます。

sponsors

top of page

©2021 coliss