簡単実装!「t.js」でタイピングアニメーションを実装する!–TamoTech–

  • LINEで送る
タイピングアニメーション

今回はタイピングアニメーションを実装します.タイピングアニメーションを実装は「t.js」を使用します.実装の導入方法や設定値,使い方を解説します.

↓こんな感じのタイピングアニメーションです!

Hello everyone.
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,第二引数にセッティングの値を設定します.

セッティング

タイピングアニメーションの設定です.参考にしてみてください.

従属設定値デフォルト意味
delay0開始の遅延時間(s)
speed50タイピングスピード(ms)最小値:10
speed_varyfalse人間のようなタイピング速度の変化
beepfalse入力中のビープ音(Web Audio API)
mistypefalseタイプミスの割合(タイプミス数➗文字数)
localenタイプミスに合わせるキーボードレイアウト
(英語:’en’,ドイツ語:’de’)
carettrueタイプ時のカーソルの有無
(class=’t-caret’)がデフォルトのHTMLを生成
blinktrueカーソルの点滅の有無
blink_permfalseカーソルの点滅設定.falseの場合,カーソルの一時停止,終了時のみ点滅
repeat0リピート回数,trueの場合無限
tag‘span’.t-container, .t-caretで設定されているタグを変更
pause_on_clickfalseクリック・タップ時のタイピング停止
pause_on_tab_switchfalseウィンドウ,タブの場合は入力を一時停止

コールバック関数

タイピングのコールバック関数は3種類です.

$(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/

SNSでもご購読できます。

コメントを残す

*