フェード表示やタイピング風など、テキスト表示に動きをつけられるjQueryプラグイン 8

  • Posted on
  • Category : Tips
フェード表示やタイピング風など、テキスト表示に動きをつけられるjQueryプラグイン 8

いずれもテキストがフェードや回転といったアニメーション付きで表示されたり、一文字ずつタイピングされているような見せ方を実装することができるjQueryプラグインです。同じようなプラグインが並んでいる感じですが、軽量なものやオプションが豊富に揃っているもの、日本語にもしっかり対応しているかなどそれぞれ特徴もあるので、こういったものを使いたい時に少しでも選択肢が広がるよう良さそうなものを備忘録兼ねてまとめました。

Letter by Letter JS

Letter by Letter JS

Letter by Letter JS はテキストを徐々に表示させる効果を簡単に実装でき、1KBという軽さも特徴のjQueryプラグインです。
デモ画面などでは全て英語が使われていますが、日本語でも動くのは確認できました。
オプションとして表示スピードと表示タイプを指定することができ、表示タイプでは単純に表示させる'show'とフェード表示させる'fade'の2種類が用意されています。
その他、表示タイプで'fade'選択時のみ有効なフェードスピードの設定や表示完了後に何かしたい時に便利なコールバックも用意されています。

chaffle

chaffle

プラグイン名にもあるように、テキストをシャッフルさせながら表示させることができるjQueryプラグインです。
デモを見てもらったほうがわかりやすいと思いますが、ホバーするとランダムに選ばれた文字列に切り替わり、その後それらがシャッフルされながら本来の文字列を表示していきます。
指定にはjQueryでの記述の他にもHTML側でデータ属性を指定する必要があるのですが、英語・日本語(漢字)・ひらがな・カタカナと4種類選択することが可能です。

jquery.textEffect.js

こちらも先ほどのものと同様で、テキストをシャッフルさせながら表示させるタイプのjQueryプラグインです。
開発者元のブログに「日本語でも動きますが、文字コードの範囲指定の都合で、blank文字が出てしまう時があります。」とあるように少し気になる部分もありますが、オプションも幾つか用意されていて、表示完了後のコールバック指定もできます。

Shuffle Letters Effect

Shuffle Letters Effect

同じくテキストをシャッフルさせながら表示させるタイプのjQueryプラグインで、しっかりテストしたわけではないですが日本語の場合でも一応動きました。
オプションとしてテキストが表示されるスピードなどの調整はできるようになっています。

textillate.js

textillate.js

こちらは様々な見せ方をすることができるjQueryプラグインで、使用する際にはこのプラグインの他に「animate.css」と「Lettering.js」も一緒に利用する必要はありますが、今回ご紹介している中でも特にエフェクトが豊富に揃っています。
デモ画面でどのようなエフェクトがあるのか動きも合わせて確認することができますが、バウンス・フリップ・フェードなどのアニメーション30種類に加え、更にそこへシャッフルやリバースといった4種類のいずれを組みわせることができます。
オプションでは繰り返しの有無やスピードといった指定ができるのはもちろん、アニメーション開始時と終了時の両方に動きを指定することもできます。

LetterFx

LetterFx

こちらも使用する際に幾つかのファイルを一緒に読み込む必要がありますが、用意されたオプションを組み合わせることで様々な見せ方をすることができるjQueryプラグインです。
フェードや回転などのように使いやすいアニメーション以外にも、文字が波打つような動きやどこからか文字が飛んでくるような動きといった面白いアニメーションも用意されており、更にそれらを組み合わせて実装したりもできます。
組み合わせるとどのような動きになるのかいろいろと試したいという場合は、デモページ下部で任意で各オプションを設定してその場で表示確認できるようになっているので、こちらを利用すると動きの確認に便利です。

jQuery TextFX

jQuery TextFX

文字列にアニメーションをつけられるjQueryプラグインで、使用する際にはこのプラグインの他に「jquery.transit.js」も一緒に利用する必要があります。
オプションで表示スピードを調整できる他、アニメーションタイプとしてフェード・スライドイン・回転・スケールの4種類の中から指定でき、スライドインを指定した場合は上下左右のどの方向からスライドしてくるかの指定が可能です。

t.js

テキストがタイピングされているような見せ方を実装できるjQueryプラグインで、ただ適用した場合は文字が一文字ずつ表示されていくという感じですが、使い方次第で面白い見せ方をすることが可能です。
例えば、実際に人が文字を入力しているかのように表示スピードにばらつきを出すことができたり、文字を打ち間違ってそれを消して正しい文字を打ち直すというような見せ方を実装できたりもします。
他にもカーソル表示の有無を指定したり、エフェクトを一時停止するといった動きを実装できるオプションなども用意されています。

Back to Top

フェード表示やタイピング風など、テキスト表示に動きをつけられるjQueryプラグイン 8

フェード表示やタイピング風など、テキスト表示に動きをつけられるjQueryプラグイン 8

/ Tips

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。