HOME > コラム > jQuery/JS Chips > タイピング入力してるようなアニメーションをかけるjQueryプラグイン「t.js」の使い方

タイピング入力してるようなアニメーションをかけるjQueryプラグイン「t.js」の使い方

コラム

t.jsは、ブラウザ上に表示されているテキストを、タイピング入力してるようなアニメーションをかけるjQueryプラグインです。
読んでもらう箇所にこのアニメーションをかけると、いじいじさせてしまう可能性があるため、読んでもらう箇所にかけるのではなく、デザイン的に見せる箇所で使うjQueryプラグインかなと思います。
テキストだけだと平たんに見えてしまう箇所も、t.jsを使えば、パッと目を引くテキストになること請け合いです。
「ちょっとは役に立ったかな?」や「ちょっと面白いな(笑)」みたいなことを感じられましたら、シェアして頂けますと幸いです。

jQuery/JS Chipsに投稿したコラム記事

タイピング入力してるようなアニメーションをかけるjQueryプラグイン「t.js」の使い方

ワンポイントで見せたいところに入れるjQueryプラグイン

t.jsは、ワンポイントで見せたいところで見せるようなjQueryプラグインのように思います。 本当に見てもらいたい文章のところに組み込むと、きっと見てもらうことなく去られてしまうように思います。w ご注意ください。

それにしても、jQueryプラグインの紹介が久しぶりになってしまいました。 でも、なんか久しぶりで色々テストしたり見たりしましたが、ワクワクが止まりませんでした。w

ということで、早速進めていきたいと思います。

本家サイトとGitHub

本家サイトとGitHubです。
プラグイン一式をダウンロードして頂けます。

ダウンロードと組み込みサンプル
組み込み済みファイルのダウンロード
phptemp_t_171020.zip
組み込み済みサンプル

サンプルです。

メインのテキストの部分がタイピング入力しているように表示されます。

元になるWEBサイトテンプレート(PHP)について

当サイト内の「SEOの基礎知識」の中のコンテンツです。

ポイント
追加で読み込ませたファイル

ヘッダ内で追加で読み込ませたファイルは以下のファイルです。
非常に簡単な感じです。

<script src="/js/t.js"></script>
jQueryの設定記述
<script>
$(function(){
$('#main').t({
	speed:120,               // 文字の表示スピード。タイピングのスピード。
	speed_vary:true,         // 「true」にすると人間が入力しているかのように文字ごとのスピード。
	delay:1,                 // 開始時間。
	mistype:25,              // 文字の打ち間違いをする確率。
	locale:'en',             // キーボードのレイアウト「en」か「de」から選択。
	caret:'<span style="color:#ffffff;">\u2589</span>',     //カーソルの表示非表示、若しくはカーソル自体の指定。
	blink:false,             // カーソルを点滅させるかどうか。
});
});
</script>

とりあえず、上記の記述をそのままコピペでお使いいただければサンプルのように動いてくれます。

最後に動作確認

今回はこれで終了でして、あとは動作確認です。
サンプルでは正常に動いているので、環境が変わりまくらない限り、上手く動いてくれることでしょう。

オプションについて

t.jsは、豊富にオプションが設定できます。
ここでオプションの一覧などを書き出してもアレですので、本家サイトでよくよく見るようにしてください。

タイピングで表示させている箇所の中に、以下のようなタグを使うことで、変わったアニメーションになります。

<del></del>
<ins></ins>
<s></s>

要素を入れ込むこともできたりするようです。
本家サイトを見て、各々お試しください。

その他、補足

WEBサイトテンプレート(PHP)の修正にあたって、以下の点に配慮しています。

  • 今回、サンプルにしたWEBサイトテンプレート(PHP)は「 phptemp_160202.zip 」です。
締め

比較的、簡単な部類に入るjQueryプラグインでした。
そして、久しぶりだったせいか、あれこれ変な手間がかかってしまいました。汗

ここのところ、多岐に渡るような感じで、幅広く色々なことに携わってるので自ずと話題の幅が広くなるところですが、jQueryプラグインの紹介も定期できっちり入れていこうと思います!

執筆 : 清水 隼斗

タイピング入力してるようなアニメーションをかけるjQueryプラグイン「t.js」の使い方の通常ページ