このページの本文へ

DESIGN こうめの“これから使える”jQueryプラグイン ― 第18回

タイプライター風アニメーションが1行で作れるt-js

2014年11月28日 11時35分更新

大竹孔明

  • この記事をはてなブックマークに追加
本文印刷
今回紹介するプラグイン

t-js


 「t-js」は、テキストをタイプライターで入力しているようなアニメーションで表示するjQueryプラグインです。minify(圧縮)版は1.9kbと軽量ですが、カーソルの点滅や一時停止、人間のようなブレのある動きなど、柔軟な表現が可能です。

 t-jsプラグインはGoogle ChromeなどのモダンブラウザーとInternet Explorer 8以降、スマートフォンではiOS 7.1のSafari、Android 4以降の「ブラウザ」に対応しています。

 ライセンスはMITです。ライセンスに従って著作権表示は削除せずに利用しましょう。

step1 jQueryプラグインの読み込み

 jQuery本体をjQueryの公式サイトから、 t-jsを配布ページからダウンロードします。「t.min.js」ボタンをクリックして保存します。

t-js配布ページ
t-js配布ページ

 ParticlegroundはGitHubでも公開されており、ページ右下の「Download ZIP」ボタンからダウンロードできます。

 また、パッケージマネージャーの「bower」でもインストールできます。bowerを導入している場合は、以下のコマンドですぐに利用できます。


bower install t.js

 利用するWebページのbodyの閉じタグ直前で、jQuery本体と、ダウンロードした「t.min.js」を読み込みます。


//(中略)
<script src="jquery.min.js"></script>
<script src="t.min.js"></script> 
</body>
//(中略) 

 これで準備はOKです。

step2 基本的な使い方

 実際にプラグインの使い方を説明します。

 t.min.jsを読み込んだ後、t()メソッドを実行します。t()メソッドは、使用したい要素をセレクターと.(ドット)繋ぎで指定します。下の例ではclass名「demo」を指定しています。

JavaScript


//(中略)
<script src="jquery.min.js"></script>
<script src="jquery.particleground.min"></script> 
<script>
$(function(){
$(".demo").t()
});
</script> 
</body>
//(中略)

 続いてHTMLを記述します。タイプライター効果を適用したい要素に対して、class名「demo」を付与します。

HTML


//(中略)
<div class="demo"> 
// ここにタイプライターのように表示したいテキストを記述
あのイーハトーヴォのすきとおった風
</div>
//(中略)

 これで、指定した要素のテキストが、タイプライターのようなアニメーションをしながら表示されます。動画のようになっていれば OKです。

step3 入力を取り消すアニメーション

 t-jsプラグインのユニークな機能として、テキストを表示した後に、いったん取り消して再表示する機能があります。取り消したいテキストをdelタグで囲みます。

HTML


//(中略)
<div class="demo">あのイーハ<del>トーブ</del>トーヴォのすきとおった風</div>
//(中略)

 上記の例では、「トーブ」というテキストを delタグで囲んでいます。実行すると動画のようになります。

 この機能をうまく使うと、より人間らしい自然なタイプが実現できます。

step4 オプションによるカスタマイズ

 アニメーションのスピードや表示方法などをカスタマイズしたいときは、オプションを利用します。オプションは、以下のようにt({...});内に指定します。

JavaScript


//(中略)  
  $('.demo').t({
  // ここにオプションを指定する
    speed : 75,
    speed_vary : false
  }); 
//(中略) 

 複数のオプションを指定する場合は、,(カンマ)区切りで指定します。

オプション名 説明 デフォルト値
speed テキストがタイプされるスピードを指定できます。数値が低いほど速くなります。 75
speed_vary 値を「true」にすると、まるで人間が入力しているかのように、タイプされる文字ごとにスピードにばらつきが出ます。 false
delay タイプを開始する時間をずらすことができます。値はmsで指定します。 false
mistype 文字の打ち間違いのような演出ができます(英数字のみ)。ミスの発生する確率を値に設定します。 false
caret 値を「true」にすると、カーソルが非表示になります。 true
blink 値を「true」にすると、カーソルが点滅します。 false
tag テキストを囲むタグを指定します。 span
repeat リピートの回数を数字で指定します。値に「true」を指定すると、無限にリピートします。 false

Step5 メソッドによるカスタマイズ

 t-jsには、メソッドもいくつか用意されています。タイピングの動きを止めたり、再開したりしたいときは、以下のようにt()の引数にメソッド名を指定します。

JavaScript


//(中略)
  $(".demo").t("メソッド名");
//(中略)

メソッド 説明
add 第2引数に指定したテキストで、指定した要素を上書きできます。
記法:$("#your-element").t("add""hogehoge");
pause タイプのエフェクトを一時停止できます。エフェクトを再開したい場合には、もう一度このメソッドを実行します。
記法:$("#your-element").t("pause");

 具体的な利用例はデモで確認してください。

 これまでタイピング効果を実装するにはテキストを画像化する必要があり、文言の変更のたびに画像を作り直す必要がありました。t-jsを使うと、HTMLの修正だけでテキストを変更できます。また、テキストですので、CSSでの装飾や文字の選択が可能な点も大きな魅力でしょう。

 うまく利用することでおもしろい演出ができそうですね!


著者:大竹 孔明

著者写真

1990年生まれ。2012年3月から2014年6月まで株式会社まぼろしでコーディングを中心にWebデザイン、CMS構築などを経験。2014年8月より株式会社ディー・エヌ・エー【DeNA】でフロントエンド業務に携わる。イベントでの登壇や執筆などの活動も行っており、ブログWeb ambではコーディングを中心にしたWeb制作にまつわる様々な情報を発信している。
個人でCSSを擬人化したリファレンスサイトのGCSSや、有料セミナーのWeb Developer Selectionの運営なども行う。 近著に「レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法」(共著、MdN刊)がある。

(タイトルイラスト:望月 水奈

Web Professionalトップへ

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング