【jQuery】t.jsでタイピングアニメーションを実装してみよう

ひぐま
ひぐま

今回はタイピングアニメーションを実装できる「t.js」の使用方法のご紹介です。
どんな感じのものができるのかは、下記のデモからご覧ください。

デモ

プラグインをダウンロードする

まずは設置するファイルをトップページからダウンロードします。
公式サイトはこちら

サイトをスクロールしていくと、水色のボタンで「t.min.js」「t.js」「zip bundle」と、ダウンロード用のファイルが並んでいますので、任意のファイルをダウンロードします。
今回私は軽量化された「t.min.js」を使用します。

ファイルを設置する

早速、ダウンロードしたファイルをHTMLに配置します。
※t.jsはjQueryに依存しますので、jQueryもご用意の上、t.jsの上に設置してください。

<!DOCTYPE html>
<html lang="ja">

 <head>
     <script src="js/jquery-1.12.4.min.js"></script><!-- 必ず上に -->
     <script src="js/tjs/t.min.js"></script>
</head>
～略
</html>

コンテンツを用意する

タイピングアニメーションを実装したいテキストを用意します。

<main>
   <section>
      <p id="Ttext">こんなふうにタイピングされたようなアニメーションが実装できるプラグインです</p>
    </section>
</main>

※あらかじめ選別できるidやクラス名等を付けてあげてください。デモでは「Ttext」というIDを付けています。

デモのようなタイピングの取り消し動作をいれたい場合、正しい言葉の前に取り消す文言を指定してあげることで、 打ち直ししたかのような表現ができます。

<p id="Ttext"><del>kn</del>こんなふうにタイ<del>png</del>ピングされたようなアニメーションが実装でき<del>t</del>るプラグインです</p>

他にも、下記を差し込むことですでに入力された直前の文言を全てクリアすることができます。

<del>*</del>

下記は、テキストに差しこんだ箇所で入力を遅延します。

<ins>2</ins>

スクリプトを書く

 <script type="text/javascript">
    $(function(){
        $('ID、クラス等').t();
    });
 </script>

先ほど指定したID、クラス等を書き込みます。
これだけで動作しますが、オプションを追加することで速さや動きを調整することもできます。

オプション一覧

delay 0 開始遅延
speed 50 タイピング速度：ミリ秒(最小10)
(その分後述の点滅も早くなります)
speed_vary false 人間が打っているかのような速度にするかどうか
beep false 入力中に電子音を鳴らすかどうか
mistype false ミスタイプのような動きをするかどうか
locale 'en' ミスタイプに合わせるための言語設定
'en' (英語) or 'de' (ドイツ語)
caret true カーソルの設定するかどうか(.t-caret)
blink true 点滅させるかどうか
blink_perm false ずっと点滅させるかどうか(falseの場合、遅延または一時停止、終了時にのみ点滅
repeat 0 タイピングを繰り返すかどうか(trueで無限)
tag 'span' 文字のwrapper等生成されるタグの種類(.t-container, .t-caret)
pause_on_click false タイピングアニメーション中にクリックまたはタップで一時停止するかどうか
pause_on_tab_switch false ウィンドウ、タブの場合一時停止するかどうか

コールバック

init:function(elm){} 初期発火
typing:function(elm,chr_or_elm,left,total){} タイピング毎発火
fin:function(elm) タイピングが終わったら発火

デモでは下記のように設定しています。

<script type="text/javascript">
$(function(){
    $('#Ttext').t({
        speed:60,//60ミリ秒
        speed_vary:true,//人間のようなタイピング動作にする
        blink_perm:false,//常に点滅しない(終了時のみ)
    });
});
</script>

使いそうな項目を主に書き出してみましたが、カスタマイズがいろいろできるようなので、
これを駆使すれば凝ったアニメーションができそうです！

関連記事