今回はタイピングアニメーションを実装します．タイピングアニメーションを実装は「t.js」を使用します．実装の導入方法や設定値，使い方を解説します．
↓こんな感じのタイピングアニメーションです！
This time, I will explain how to implement typing animation.
It is easy to implement using “t.js”.
「t.js」の導入方法
導入方法は2つあります．CDNまたはGithubより「t.min.js」をダウンロードする方法です．
CDN
CDNの場合以下のコードをhead内に記入してください
<script src="https://cdn.jsdelivr.net/gh/mntn-dev/t.js/t.min.js"></script>GitHubよりZipファイルをダウンロード
こちらのサイトよりZipファイルをダウンロードし，「t.min.js」を任意のフォルダに移動してください．そこからHTMLでjavascriptファイルとして読み込みます．
<script src="./js/t.min.js"></script>headタグ内で「t.min.js」を読み込んでください．
使用方法
使用する時のコードは至って簡単です．以下のコードを記載するとタイピングが開始されます．
$(elm).t();最も基本的なタイピングアニメーションになります．要素に対して「t()」でタイピングが開始されます．セッティングをしていないので全て初期値になっています．初期値はセッティングでの表で確認してください．
設定値を記述するのは以下になります．
$(elm).t({
delay: 1,
speed: 50,
speed_vary: true,
repeat: true,
});上記の例では，4つのパラメーターを変更しています．パラメーターの設定はセッティングの表で確認できます．
HTMLのタグ内に文字を記載せず，js側でタイピング文字を設定する場合は，以下のように記述します．
$(elm).t('テキストまたはHTML',{
delay: 1,
speed: 50,
speed_vary: true,
repeat: true,
});第一引数に任意のテキストまたはHTML，第二引数にセッティングの値を設定します．
セッティング
タイピングアニメーションの設定です．参考にしてみてください．
| 従属 | 設定値 | デフォルト | 意味 |
| delay | 0 | 開始の遅延時間（s） | |
| ↓ | speed | 50 | タイピングスピード（ms）最小値：10 |
| → | speed_vary | false | 人間のようなタイピング速度の変化 |
| beep | false | 入力中のビープ音（Web Audio API） | |
| ↓ | mistype | false | タイプミスの割合（タイプミス数➗文字数） |
| → | local | en | タイプミスに合わせるキーボードレイアウト （英語：’en’，ドイツ語：’de’） |
| ↓ | caret | true | タイプ時のカーソルの有無 （class=’t-caret’）がデフォルトのHTMLを生成 |
| → | blink | true | カーソルの点滅の有無 |
| → | blink_perm | false | カーソルの点滅設定．falseの場合，カーソルの一時停止，終了時のみ点滅 |
| repeat | 0 | リピート回数，trueの場合無限 | |
| tag | ‘span’ | .t-container, .t-caretで設定されているタグを変更 | |
| pause_on_click | false | クリック・タップ時のタイピング停止 | |
| pause_on_tab_switch | false | ウィンドウ，タブの場合は入力を一時停止 |
コールバック関数
タイピングのコールバック関数は３種類です．
$(elm).t('テキストまたはHTML',{
delay: 1,
speed: 50,
speed_vary: true,
repeat: true,
init:function(elm){ //このコールバック関数の場合初期発火
/*ここに処理を記入*/
}
});| コールバック関数 | 意味 |
| init:function(elm){} | 初期発火 |
| typing:function(elm,chr_or_elm,left,total){} | タイピングごとに発火 |
| fin:function(elm){} | 全ての文字をタイピングした後に発火 |
メソッド
タイピングアニメーションのに使えるメソッドです．
| メソッド | 意味 |
| $(elm).t(‘add’,content) →shorthand: $(elm).a(content) | 要素にテキストを追加 |
| $(elm).t(‘queue’,content) →shorthand: $(elm).q(content) | ‘add’と似ている キューに入れられた処理 |
| $(elm).t(‘pause'[,true/false]) →shorthand: $(elm).p([true/false]) | 入力の一時停止 |
| $(elm).t(‘speed’,ms) →shorthand: $(elm).s(ms) | タイピングスピードの変更 |
| $(elm).t(‘beep’) →shorthand: $(elm).b() | タイピング音の設定 初期値非入力 |
| $(elm).t_off([true]) | タイパーのインスタンスを破棄 trueの場合コンテンツも破棄 |
まとめ
今回はタイピングアニメーションの実装方法を解説しました．文字の強調や，デザイン的にもタイピングアニメーションはよく使われます．試してみてはどうでしょうか！
GitHub – mntn-dev/t.js
https://mntn-dev.github.io/t.js/
