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. no-image

    JavaScript

    スタイリッシュで美しいイメージスライダー「Gliding Gallery」

    Gliding Galleryはスタイリッシュで美しいシンプルなイメー…

  2. Validatr

    JavaScript

    HTML5のinput属性による検証ができるフォーム実装「Validatr」

    Validatrは、HTML5のinput属性を用いて検証できるさまざ…

  3. no-image

    JavaScript

    軽量なスティッキー要素を実装できるjQueryプラグイン「Zebra Pin」

    Zebra Pinは軽量なスティッキー要素を実装できるjQueryプラ…

  4. Filterable Product Grid
  5. NO IMAGE

    JavaScript

    フレキシブルで軽量なJavaScriptモーダル実装「Vanilla Modal」

    Vanilla Modalは、フレキシブルでファイル容量も軽量なCSS…

  6. jQuery Hero Slider Plugin

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP