t.js

JavaScript

タイプライターで文字を入力するようなテキストエフェクトのjQueryプラグイン「t.js」

t.jsというjQueryプラグインを使えば、タイプライターで文字を入力するようなテキストエフェクトを実装することができます。deleteキーで文字を打ち直したりするような動作も設定可能なので、文字をリアルタイムで入力している感じの印象を与えることができます。

[ads_center]

t.jsの使い方

使い方はとてもシンプルです。head内にjQuery本体とプラグインを読み込みます。

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script src="t.js"></script>

表示させたいテキストをセレクタにセットします。

<script>
$(function() {
    $('#sample').t('これはt.jsの<del>テスト</del>サンプルです。',{speed:30,speed_vary:true});
});
</script>

<del></del>に記述したテキストは、1度入力表示された後に削減され、その後に続く文字に打ち直されます。

文字入力が現在進行中のような動きになりますね。

あとはテキストを挿入させるタグを記述しておくだけです。

<div id="sample"></div>

オプションのspeedで入力スピードを調整できます。数値が高いほど遅く、低いほど速くなります。

speed_varyをtrueに設定することで、リロードする度に入力するテンポや速度が異なってきます。

t.js

関連記事

  1. JavaScript

    シンプルでスワイプにも対応したスライダーならSimple jQuery sliderがオススメ

    シンプルでスマホのスワイプにも対応したスライダーを実装したいって時にオ…

  2. EasyFader Plugin Demo

    JavaScript

    レスポンシブ対応で軽量なフェードスライドショーを実装する「EasyFader Plugin Demo…

    シンプルなフェードアニメーションによるスライドショーを実装することがで…

  3. Blindify
  4. jQueryTween

    JavaScript

    軽量で軽快なアニメーションをするjQueryプラグイン「jQueryTween」

    jQueryTweenは軽量で軽快なアニメーションを実装することができ…

  5. nanoGALLERY
  6. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのfocusとblurを使えばフォームが便利になる

    jQueryのfocusとblurを使えばフォームを便利にすることがで…

最近の記事

  1. OWL-WDDESK01
  2. ワンタッチ着脱フィルターキット
  3. Soundcore Ace A1
  4. cheero USB-C PD Charger 60W

アーカイブ

PAGE TOP