Webデザイナーなんてやってると、何か変わった事ができないかなーって事を常に考えてしまいます。私はWebデザイナーは「引き出しの数」で勝負が決まると思っているので、なんでもできるようになりたいんです。
今回はあんまり使用用途はなさそうだけど、タイプライター風のjQueryを使ってみました。
スポンサードリンク
これが使えると面白いかも!?タイプライター風jQuery「t.js」
タイプライターといえば「俺の名はルパン三世」を思いついてしまうのは私がそこそこ歳をとっているからでしょうか(笑)
パチスロ4号機時代にはタイプライター予告に熱くなったものです。
・・・
話はそれましたが、とりあえずタイプライター風のjQueryを実装してみたいと思います。
タイプライター風のjQueryを動かす準備をする
まずは以下のURLからt.jsをダウンロードしてください。
設置は以下のような感じです。
~内に記載
1 2 3 4 5 6 7 8 9 10 |
<script type="text/javascript" src="common/js/jquery-1.8.2.js"></script> <script type="text/javascript" src="common/js/t.min.js"></script> <script> $(function(){ $(".type_text").t({ speed : 75, speed_vary : false, }) }); </script> |
htmlに記載
1 2 3 |
<div class="type_text"> 俺の名は<del>日本一仕事ができる</del>まぁまぁ仕事ができるWEBデザイナーズNEXTだ! </div> |
まぁ、基本的にはこれだけで動きます。
ルパン風…という事ではないのですが、こちらの方が使いやすいかもしれませんね。ちょっとしたポイントに使えると思います。
ちなみに<del>~</del>で囲むと、一度タイピングしたものを消すという面白い動きをします。
ギャグっぽく使ってみるとよいかもしれません。
オプションも少しだけまとめてみました。基本的にはhead内に書いたスクリプトの部分を触ります。
speed
デフォルトが75で、早めたり遅くしたりする時に数字を変更してください。
speed_vary
デフォルトはfalseになっていますが、trueにすると不規則なタイピングになります。
他にもあるのですが、使うのはこの2つくらいでしょうかね。
ほとんど使用用途がないけど、タイプライター風にできるjQuery「t.js」を使ってみた まとめ
タイプライター風…なんてほとんど使う機会ないじゃん!っていうツッコミはしないでくださいね。
Webデザイナーはいつも仕事に追われていて、遊び心というものを失ってしまいがちな職業ですが、せっかくWebデザイナーになったのだから面白い事をやってやろう!という気持ちは常に持っておきたいと思っています。
jQueryが使えるようになってから、Webデザイナーがリッチなコンテンツを作りやすくなりました。
今後も面白いjQueryを見つけたら紹介していこうと思います。
スポンサードリンク