テキストにタイプライターのようなエフェクトを加えるText Effects Plugin
「jQuery Grab Bag」で、『Text Effects Plugin』というテキストにエフェクトを加えて表示するプラグインが紹介されていました。なかなかユニークだったので紹介がてら試しに使ってみることにします。
まずはスクリプトを読み込み
まずはスクリプトを読み込んでおきます。
<script type="text/javascript" src="jquery.○○.js"></script> <script type="text/javascript" src="jquery.text-effects.js"></script>
あとは適応させたいテキスト部分に、下記の指定をするだけでエフェクトがつくようになります。
ROT-13
■スクリプト
$("#test1 p").rot13();
■デモ
I study jQuery and write it in Blog. However, I don't get time for study very much recently. Therefore it decreases in time to write blog. But I do my best and am going to make study hours such as jQuery. In future THE HAM MEDIA thanking you in advance.
Typewriter
■スクリプト
$("#test2 p").typewriter();
■デモ
I study jQuery and write it in Blog. However, I don't get time for study very much recently. Therefore it decreases in time to write blog. But I do my best and am going to make study hours such as jQuery. In future THE HAM MEDIA thanking you in advance.
Unscramble
■スクリプト
$("#test3 p").unscramble();
■デモ
I study jQuery and write it in Blog. However, I don't get time for study very much recently. Therefore it decreases in time to write blog. But I do my best and am going to make study hours such as jQuery. In future THE HAM MEDIA thanking you in advance.
Scrambled Writer
■スクリプト
$("#test4 p").scrambledWriter();
■デモ
I study jQuery and write it in Blog. However, I don't get time for study very much recently. Therefore it decreases in time to write blog. But I do my best and am going to make study hours such as jQuery. In future THE HAM MEDIA thanking you in advance.
テキストにエフェクトを入れる機会ってそんなにないかもしれないですが、キャッチコピーの部分とかで使ってみるのはどうでしょうね。
注意
ちなみに、一つだけ注意なのですが、日本語で入れても、ROT-13は日本語部分が無視されます。UnscrambleとScrambled Writerも、日本語は表示されるようになっていますが、ランダムで表示されている時は全部アルファベットになってしまいます。Typewriterだけが日本語でも問題なく、ちゃんと表示されるようです。
※追記（2009/03/27）IEでは"Unscramble"がうまく動作しないようです。jQueryのバージョンとでも関係しているのでしょうか？これはなぞですが、jQuery1.3.2を利用してIE6、IE7でみると、"Unscramble"が動作しませんでした。
