IE6以上からのタイポグラフィアニメーション・jQueryプラグインのまとめ
文字に動きを持たせ魅力的なサイトを作ってみよう･･･ということで、
タイポグラフィ系のプラグインをまとめてみます。
動きのバリエーションが多彩な「textillate.js」
CSS3のアニメーションを利用したjQueryプラグイン「textillate.js」。
動きも魅力的なタイポグラフィアニメーションを利用することができますが、いかんせんCSS3がIE8,9に対応していないため、レガシーブラウザに対応できない案件では採用しづらいかも。
Lettering Animate
ということでレガシーブラウザに対応してそうなタイポグラフィアニメーションのjQueryプラグインを探してみたところ、kachibiti.netさんに掲載されていた「アニメーションしながら少しずつ文字を表示させていくエフェクトを実装するjQueryプラグイン・Lettering Animate」より、lettering.jsを利用しjQueryでアニメーションをつけたパターン。
アニメーションのクオリティはtextillate.jsよりは劣りますが、レガシーブラウザには対応していそう。lettering.jsはアニメーション以外でもブラウザの幅にフォントサイズを合わせてくれるなどアニメーション以外でも使えそうなプラグインです。
※すみません。IE11のエミュレータで確認したところ、IE8以下はまともに動きませんでした。
Textualizer
というわけでググってIEのエミュレータで確認しながら探してみたところ、「Textualizer」というjQueryというか、javascriptのライブラリである「Textualizer」というのを見つけました。
サイトをみる限り対応ブラウザが
Chrome
Safari 4+
Firefox 3.5+
IE 6,7,8,9+
Opera 10.6+
Mobile Safari (iOS 4+)
ということらしいのでレガシーブラウザを十分カバーできそうです。
デモおよびダウンロードはこちらから
その他
そのほかにレガシーブラウザに対応してそうなテキストエフェクト系のjavascriptライブラリを並べてみます。