要素にタイピング風のアニメーションを加えることができるjQueryプラグイン「t.js」

t.jsは、まるでタイピングされているようなアニメーションを文字に加えることができるjQueryプラグインです。

挙動については、以下デモページをご参照ください。

デモ1　デモ2

t.jsの導入手順

ステップ1. t.jsのダウンロードと設置

まずは、GitHubからt.jsをダウンロードして、t.min.jsをサーバーにアップします。

ファイルをサーバーにアップしたら、jQuery本体とt.min.jsを読み込みましょう。

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="t.min.js"></script>

ステップ2. HTMLのマークアップ

HTMLでは、アニメーションを加えたい部分にIDもしくはクラスを指定しておきます。今回は#tというIDを指定しています。

<div id="t">Hello World.</div>

上記はテキストのみですが、画像を入れても大丈夫です。

ステップ3. t.jsの実行

最後にt.jsを実行します。

<script>
$(function(){
  $('#t').t({
    delay:0.5, //アニメーションの遅延
    speed:50, //アニメーションの速度
    speed_vary:false, //リアルなタイピングのスピード
    beep:false, //タイピング音の有無
    mistype:false, //ミスタイプの有無
    locale:'en', //キーボードレイアウト。'en' (english) もしくは 'de' (german)
    caret:true, //カーソル
    blink:true, //カーソルの点滅の有無
    blink_perm:false, //カーソルの点滅の継続
    repeat:0, //繰り返し
    tag:'span', //要素を内包するタグ
    pause_on_click:true, //クリックで一時停止
    init:function(elm){}, //タイピング開始時のコールバック
    typing:function(elm,chr_or_elm,left,total){}, //タイピング毎のコールバック
    fin:function(elm){} //タイピング終了時のコールバック
  });
});
</script>

色々なオプションが用意されているので、好みの動きにすることができますね。

あとがき

t.jsを導入することで、一風変わった表示の仕方をすることができますね。

テキストや画像を表示する際に、タイピング風のアニメーションをさせたい場合は、ぜひ導入をご検討ください。