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

CSS Color ChartCSSのカラーネーム、HEX、RGBを1クリックでコピーできるカラーチャート「CSS Color Chart」前のページ

ふわふわと流れるアニメーション付きの雲を実装できるjQueryプラグイン「jQlouds」次のページjQlouds

関連記事

  1. popModal

    JavaScript

    6種類のモーダルウィンドウを実装できる「popModal」

    popModalは6種類のモーダルウィンドウを実装することができるjQ…

  2. OneBook3d

    JavaScript

    フォトアルバム(ブック)に最適なjQueryプラグイン「OneBook3d」

    OneBook3dはブラウザ上でフォトアルバム(ブック)を作るのにとて…

  3. Scrollgress

    JavaScript

    スクロールに連動するプログレスバーを実装できる「Scrollgress」

    Scrollgressはスクロールに連動するシンプルで軽量なプログレス…

  4. JavaScript

    フレキシブルなjQueryプラグインのアコーディオンパネル「Flexible Slide-to-to…

    いい感じのアコーディオンがあったので試してみたところ、とてもよさげだっ…

  5. no-image

    JavaScript

    カスタマイズ性の高いjQueryアラート・モーダル・lightboxプラグイン「jAlert」

    jAlertはカスタマイズ性の高いjQueryアラート・モーダル・li…

  6. Slinky

    JavaScript

    モバイルライクなナビゲーションメニューを実装できる「Slinky」

    Slinkyは軽量でレスポンシブに対応したモバイルライクなナビゲーショ…

最近の記事

  1. スタバ ドリップコーヒー
  2. エチオピア
  3. 紗々 飴色和栗
  4. DCG-CA21
  5. Apple WatchでのMacロック解除を無効

アーカイブ

PAGE TOP