要素にタイピング風のアニメーションを加えることができるjQueryプラグイン「t.js」

要素にタイピング風のアニメーションを加えることができるjQueryプラグイン「t.js」

要素にタイピング風のアニメーションを加えることができるjQueryプラグイン「t.js」
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加
  • follow us in feedly


  • 一式98,000円~の格安プランをご用意!Web制作お任せください!
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

t.jsは、まるでタイピングされているようなアニメーションを文字に加えることができるjQueryプラグインです。

挙動については、以下デモページをご参照ください。

デモ1 デモ2

スポンサードリンク

t.jsの導入手順

ステップ1. t.jsのダウンロードと設置

まずは、GitHubからt.jsをダウンロードして、t.min.jsをサーバーにアップします。

ファイルをサーバーにアップしたら、jQuery本体とt.min.jsを読み込みましょう。

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="t.min.js"></script>
ステップ2. HTMLのマークアップ

HTMLでは、アニメーションを加えたい部分にIDもしくはクラスを指定しておきます。今回は#tというIDを指定しています。

<div id="t">Hello World.</div>

上記はテキストのみですが、画像を入れても大丈夫です。

ステップ3. t.jsの実行

最後にt.jsを実行します。

<script>
$(function(){
$('#t').t({
delay:0.5, //アニメーションの遅延
speed:50, //アニメーションの速度
speed_vary:false, //リアルなタイピングのスピード
beep:false, //タイピング音の有無
mistype:false, //ミスタイプの有無
locale:'en', //キーボードレイアウト。'en' (english) もしくは 'de' (german)
caret:true, //カーソル
blink:true, //カーソルの点滅の有無
blink_perm:false, //カーソルの点滅の継続
repeat:0, //繰り返し
tag:'span', //要素を内包するタグ
pause_on_click:true, //クリックで一時停止
init:function(elm){}, //タイピング開始時のコールバック
typing:function(elm,chr_or_elm,left,total){}, //タイピング毎のコールバック
fin:function(elm){} //タイピング終了時のコールバック
});
});
</script>

色々なオプションが用意されているので、好みの動きにすることができますね。

あとがき

t.jsを導入することで、一風変わった表示の仕方をすることができますね。

テキストや画像を表示する際に、タイピング風のアニメーションをさせたい場合は、ぜひ導入をご検討ください。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。