t.jsを使ってタイピング風のアニメーションを再現する

t.jsを使ってタイピング風のアニメーションを再現する

はやち

はやち

どうもですよ、はやちですよ:D
今回は、ページ上でタイピングをしているようなアニメーションが再現できるツール「t.js」をご紹介します。

導入方法

githubのほうでダウンロードしてから読み込んでください。

<script src="t.min.js"></script>

実装方法

基本的な設定方法ご紹介します:D
動かしたいhtmlのマークアップに対して

<div id="js-target" class="box">Hello, World.
This time I tried using t.js.</div>

指定をするだけで実装が完了になります! 簡単!

$('#js-target').t();

設定されたものは下のような動きになります。

※再度ご確認の際はRERUNを押してください

その他の設定

オプション

Name Default Description
delay 0 アニメーションの遅延
speed 50 タイピングアニメーションの速度
speed_vary false タイピングの動きをリアルめに再現するかどうか
beep false タイピングの音の有無
mistype false ミスタイプ風の動きの有無
locale en 言語の設定、’en’,’de’
caret true カーソルの設定、class:.t-caret;で振られている
blink true カーソルの点滅の有無
blink_perm false カーソルをずっと点滅させるかの設定、falseの場合一時停止、終了時にのみ点滅します
repeat 0 繰り返しタイピングの設定、trueは無限に動きます
tag ‘span’ .t-container, .t-caretで設定されているタグを変更
pause_on_click false click/tap(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(‘pause'[,true/false])
→shorthand: $(elm).p([true/false])
タイピングの停止
$(elm).t(‘beep’)
→shorthand: $(elm).b()
タイピング音の設定

まとめ

いかがだったでしょうか? 今回はシンプルな実装方法に絞ってご紹介しましたが、コールバックもタイミングによって調整可能なので、いろいろと工夫できる気がいたしました!
では、また ノシ

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

はやち
はやち フロントエンドエンジニア / 林 佳代子

フロントエンドエンジニアのはやちです( ˘ω˘)☝ 以前までは顔隠しておりましたが思い切ることにしました…。 相変わらず顔文字乱舞ですがブログもコーディングも楽しくやっていこうと思います✌(´ʘ‿ʘ`)✌ 今までに作ったDemoたちはGithubにて公開しております!よろしければ是非( ˘ω˘)☞三☞シュッシュッ

このメンバーの記事をもっと読む
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL