タイピングをそのまま再現するソフトウェアは昔から人気があります。カーソルを表示したり、タイプライター風に一文字ずつ表示するなど、様々なバリエーションがあります。最初からすべて表示されているよりもユーザの視線を引きつける効果もあります。 そんな文字入力を再現するJavaScriptライブラリがtplyです。という新しいHTMLタグを使って簡単に利用できます。

tplyの使い方

tplyのサンプルです。

<div id="source">
  <type>
    Why, hello there! How are you? I'm good!
  </type>
</div>
<div id="destination">
</div>

<script>
    tply.animate(
        document.getElementById("source"),
        document.getElementById("destination"));
</script>

これを実行すると次のようになります。入力キャレットもあって、リアルです。

指定時間だけ遅らせる指定もできます。

文字を消すパターン。

リピート。

tplyは文字を装飾するのも簡単にできるので、汎用的に利用ができます。文字が徐々に現れていくような表示も簡単に実現できるでしょう。プログラミングの学習などで使ってみても面白いかも知れませんね。

tplyはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

tply demo ichub/tply: typewriter effect for your websites