どうもですよ、はやちですよ: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サイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
