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. P-Loading

    JavaScript

    パワフルなローディングマスクを実装できるjQueryプラグイン「P-Loading」

    P-Loadingは、パワフルなローディングマスクを手軽に実装すること…

  2. FilmRoll

    JavaScript

    中央に来た項目に焦点を当てるカルーセルを実装できるjQueryプラグイン「FilmRoll」

    FilmRollというjQueryプラグインを使えば中央に来た項目に焦…

  3. no-image

    JavaScript

    レスポンシブ対応でモバイルフレンドリーなjQueryデートピッカー・タイムピッカー「pickadat…

    pickadateはレスポンシブに対応したモバイルフレンドリーなデート…

  4. Coin Slider

    JavaScript

    ユニークなエフェクトを実装できるjQueryイメージスライダー「Coin Slider」

    ユニークなエフェクトで画像がスライドしていくjQueryイメージスライ…

  5. Simple Image Panner and Zoomer
  6. Slideout.js

    JavaScript

    軽量でタッチスライド対応のサイドメニュー・Slideout.js

    Slideout.jsは軽量でスマフォでのタッチスライドに対応したサイ…

最近の記事

  1. 濃いアーモンドミルク
  2. COMOLI ベタシャンプルオーバーシャツ
  3. ユニクロ エアリズム マイクロメッシュVネックT(半袖)
  4. ライオン システマ 超コンパクト ふつう
  5. タリーズ ハムチーズ&サラダサンド

アーカイブ

PAGE TOP