ホームページ上に文字をタイピングしているような動きを出すことができる
jQueryのプラグイン「Typed.js」というものがあります。

この「Typed.js」は指定した要素に対し、実際に文字をタイピング入力してるように見せることができるプラグインです。

導入は簡単で、入力スピードやテキストの削除、改行など様々な設定を行うことが可能です。
アピールしたいテキストや読んでもらいたい箇所に設置すると効果が出るのかと思います。

下記にjQueryのプラグイン「Typed.js」を導入した時の方法を記載します。

jQueryプラグイン「Typed.js」の使用方法

下記のページから「Typed.js」をダウンロードします。

https://github.com/mattboldt/typed.js/

ファイル読込

jQueryとダウンロードした「Typed.js」を読み込みます。

HTML

タイピングさせたい要素を指定します。
下記は「id=”typed”」で指定したspanタグ内に文字を出力させるようにしています。

必要であればcssでスタイルを調整します。

JS

HTMLで記述した要素を指定してタイピングの設定を行います。

設定内容は下記のようになります。

• strings
  タイピング入力させる文字を指定します。
• typeSpeed
  タイピングのスピードを指定します。
• startDelay
  タイピングがスタートするまでの時間を指定します。
• backSpeed
  バック（文字を削除）するスピードを指定します。
• backDelay
  バック（文字を削除）するまでの時間を指定します。
• loop
  タイピングをループさせるかを指定します。（true、false）
• cursorChar
  カーソル文字を指定します。
• contentType
  テキストがhtmlかtextかを指定します。

stringsで「,」で区切ると文字を削除して次の文字列を表示することが可能。
「contentType: ‘html’」で指定している場合は、文字列内にHTMLを記述することができます。

また、タイピングの入力を一時停止させる場合は下記のように記述します。

文字列内に「^1000」を入れて時間をストップさせます。
数値はストップさせる時間です。

サンプル

「Typed.js」を使ったサンプルを用意しました。
タイピングしているように文字が表示されます。

jQueryプラグイン「Typed.js」を使用したデモページ

まとめ

あまり使用する機会はないかもしれませんが。。。
ホームページにタイピングしたような文字を出力させたい場合は活用できるプラグインです。
他にもタイピングのアニメーションをするプラグインはありますが、「Typed.js」は簡単に導入できるのでおすすめです。

オプションも色々あるので、自由に設定することができると思います。
キャッチコピーなどで使用してもありかもしれないですね。
是非、チェックしてみてください。