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

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

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

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

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

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

• t.js本家
• t.jsのGitHub

phptemp_t_171020.zip

サンプルです。

• 組み込み済みサンプル

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

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

• コンテンツSEOのためのWEBサイトテンプレート（PHP）

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

<script src="/js/t.js"></script>

<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」の使い方のAMPページ