文字をタイピングする様なエフェクト(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

http://mn.tn/dev/t.js/ https://github.com/mntn-dev/t.js

使い方

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

HTML

ここの文字がエフェクトの対象

JS

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



ただタイプするなら
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);
        }
      }
    });
  });

スポンサーリンク
スポンサーリンク
スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサーリンク