文字をタイピングする様なエフェクト(t.js)

文字をタイピングするエフェクト、t.js

読ませる文字には使えないかもですが、面白いので使ってみました。
まずはデモでも。

t.jsのデモ

テキストをタイピングした様に見せるプラグイン(t.js)noでもデモです
個人的な感想ですが、文字として読ませるのではなくデザインを際立たせるアクセントとして使うのが無難なのではないでしょうか。1
あと、日本語より英数字の方がシックリ来る感じがしました。2

※試しに英語な感じでの挙動
It is a demonstration of a plug-in (t.js) that can produce effects like typed text
As personal impressions, it is not safe to use it as an accent that stands out the design rather than letting it read as a letter.1
Also, I felt that the alphanumeric characters are coming sharply than in Japanese.



ダウンロード先

images

https://github.com/mntn-dev/t.js

使い方

エフェクトを付与する対象にidを付けておきます。記述例では「id=”t”」となっています。

HTML

<div id="t">ここの文字がエフェクトの対象</div>

JS

jQuery本体と、ダウンロードしてきた「t.min.js」を読ませます。

<script src="JSを配置したパス/t.min.js" type="text/javascript"></script>

ただタイプするなら

jQuery(function($){
  $("#t").t()
});

カスタマイズしたいなら、パラメータや実行後の処理を付与させる

  jQuery(function($){
    $('#t').t({

      //パラメータ
      speed: 35,         // タイプ速度
      speed_vary: false, // 文字毎にウエイト
      mistype: 20,       // タイピングミス頻度
      blink: false,      // 実行中のカーソル点滅
      delay: 0ms,        // タイプ開始までのウエイト時間
      repeat:false,      // リピート

      typing: function (elem, chars_total, chars_left, _char) {
        if (_char == '*') foo();
      },
      fin: function () {
        if (fin == !1) {
          fin = !!1;

          //タイプ後、一度だけ実行(後ろに文字追加)
          window.setTimeout(function () {
            $('#t').t('add', '「出力おわりました」');
          }, 2e4);

          //タイプ後、一定時間ごとに繰り返し(タイプ後、カーソル点滅)
          window.setInterval(function () {
            $('#t').find('.t-caret').toggle();
          }, 5e2);
        }
      }
    });
  });