jqueryプラグイン「typist」?? ○○さん、ありがとうございました!!

 

今回は、タイトルにある通りJqueryプラグイン「typist」についてのご紹介です。

 

これは、twitterでとある方のポートフォリオを拝見した際に、使っていたので、興味があって調べてみた所見つけました。「いや〜面白いな〜😳」と思ってアウトプットの一貫としてみなさんにも共有したいと思います!

 

まず、わかりやすいように下の動画をご覧ください!

 

f:id:K-noblog:20190707211436g:plain

はい、動画が見切れてしまって申し訳ありません...

 

このプラグインを使えば、自分で自由に決めた文字を1文字ずつ表示してくれます。1文字ずつ表示するので、タイプライターで入力しているようなアニメーションを実装することができます。

私は、昔からゲームが好きなので、これを見るとドラクエポケモンを少し思い出します←共感してくれる方はいないかもしれませんが...笑

 

 

では、早速導入方法とコードを紹介します。

1.下のリンク先(インストール)から最新のtypist.jsをダウンロードしておく。

 ※これができていないと実装時にエラーが出るのでご注意を!!

github.com

 

2.headの中に下の2行を設置をする

f:id:K-noblog:20190707214746p:plain

 

3.body内にコードの記述をする

f:id:K-noblog:20190707215143p:plain

今回は、わかりやすいように簡易的に記述しています。

 

まず、クラスは自由に決めていただいて、<script>内で$('クラス名')で指定してあげます。

typistのオプションについては、1のリンク先に記述がありますのでそちらで確認していただければと思います。

 

私は、

typistAddでアニメーションさせる文字を決めてあげて、

typistで、アニメーションの文字の速度を指定し、

typistPauseで一行読んだら、一時的に停止させています。

 

オプションは、記述の順番によって、停止するタイミング等も変わってきます。

 

以上になります。とても簡単に実装ができるので、興味ある方がみえましたら、ぜひアレンジしながら試していただければと思います。

 

はい!本日もブログをみてくださって誠にありがとうございました!もし、何か記述で誤っていることやご質問等ありましたら、お気軽にお待ちしております。

では、また次回もよろしくお願いします🙇