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. EZ Plus

    JavaScript

    タッチにも対応した画像ズーム機能を実装できるjQueryプラグイン「EZ Plus」

    EZ Plusはタッチにも対応した画像ズーム機能を実装することができる…

  2. GridTab

    JavaScript

    グリッドベースのレスポンシブなタブを実装できるjQueryプラグイン「GridTab」

    GridTabはグリッドベースによるレスポンシブに対応したタブを実装す…

  3. Typewriter JS

    JavaScript

    タイプライターっぽいエフェクトでテキストを表現できる「Typewriter JS」

    Typewriter JSは、タイプライターを使って文字入力するような…

  4. Canvi

    JavaScript

    左右からスライド表示するシンプルなナビゲーションメニュー「Canvi」

    CanviはVanilla JSによるシンプルなナビゲーションメニュー…

  5. Scroll Indicator

    JavaScript

    シンプルなスクロールインジケーターを実装できる「Scroll Indicator」

    Scroll Indicatorは、スクロールによるアニメーションでコ…

  6. jquery-backToTop

    JavaScript

    カスタマイズ性に優れたトップへ戻るボタンを実装できる「jquery-backToTop」

    jquery-backToTopはカスタマイズ性に優れた「トップへ戻る…

最近の記事

  1. CAR-HLD12BK
  2. OWL-LPB6701LA
  3. cheero Power Mountain mini 30000mAh CHE-110

アーカイブ

PAGE TOP