THE HAM MEDIA BLOG

テキストにタイプライターのようなエフェクトを加えるText Effects Plugin

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin紹介
タグ:
テキスト
エフェクト
jquery

テキストにタイプライターのようなエフェクトを加える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"が動作しませんでした。
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/116280476
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック

jQueryでタイプライター風に表示する「jQuery TypeWriterLite」
Excerpt: 自作プラグイン「jQuery TypeWriterLite」 タイプライター風にテキストを表示してくれるjQueryのプラグインはいくつかあるのですが、もっとシンプルなやつが欲しい!というわけで車輪の..
Weblog: こーどえいと
Tracked: 2010-02-10 01:41

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。