Webページの要素にアニメーションが付けられるjQueryプラグインについてまとめました。デザインでのちょっとしたアクセントになるだけでなく、使いようによってはユーザビリティ向上にもつなげられます。とはいえ、使いすぎは禁物です。使いどころをよく考えながら、上手に使っていきましょう。
Animate.css
その名の通り、アニメーションが実装できるjQueryプラグインです。使えるアニメーションの数がとても多いことが特徴的でしょう。
「Bounce（バウンス）」や「Fading（フェードイン、フェードアウト）」などのよく知られたものから、「hinge（ヒンジ）」などおもしろいアクションも使えます。
Hover.css
» Hover.css – A collection of CSS3 powered hover effects
その名の通り、要素にホバーした時のアニメーションが実装できるプラグインです。ホバーエフェクトと聞くとあまりおもしろみがないように思えますが、Hover.cssは非常にたくさんのアニメーションが使えます。
要素の外枠（border）や背景（background）をtransitionさせたり、アイコンだけを動かすことも可能です。他にも目を惹くアニメーションが使えるので、一度デモを見ることをおすすめします。
Velocity.js
さまざまなアニメーションが実装できるjQueryプラグインです。transformやeasing、ループなどのアニメーションを簡単に導入することができます。
公式サイトには、詳細なドキュメントやサンプルコードが掲載してあります。導入する時の参考になるでしょう。なお本プラグインはjQueryのプラグインなのですが、jQueryなしでも動作させることができます。
CSShake
» CSShake
HTML要素をぶるぶるとふるわせるアニメーションが実装できるプラグインです。アニメーションの種類も豊富で、10を超えるパターンから選ぶことができます。
jQuery Vortex
HTML要素を、立体的に回転させることができるjQueryプラグインです。回転させる向きやスピード、回転量、初期位置など細かく指定ができます。
使い方はとても簡単で、divなどのボックス要素にIDを指定するだけでOKです。ギャラリーページなど、視覚的に訴えたいケースで活用できるでしょう。
jQuery Easing Plugin
さまざまなeasing（イージング）が実装できるプラグインです。選択できるeasingは32種類と豊富で、ニーズに合わせてさまざまなアニメーションが実装できると言えるでしょう。
Choreographer-js
さまざまなCSSアニメーションが実装できるjQueryプラグインです。複雑なアニメーションも、数行のコードで設定することができます。GitHubのデモページでは、スクロールに従って文字が回転したり、色が変わったりするアニメーションが見られます。
tabtab.js
» tabtab.js – jquery animated tabs plugin
タブの遷移にアニメーションを追加してくれるjQueryプラグインです。無味乾燥なタブ遷移を、スムーズかつキャッチーなものにしてくれます。タブを使うことは多いので、導入できるシーンは多いでしょう。
なお、tabtab.jsを動作させるには、前出のVelocity.jsを併用する必要があります。
jQuery.Shapeshift
Pinterestのようにグリッド状にレイアウトされた要素を、ドラッグアンドドロップで移動できるようにするjQueryプラグインです。レスポンシブデザインに対応していて、スマホなどのタッチして操作する端末にも対応可能です。
jQuery.Shapeshiftの制作者は、同じくjQueryプラグインとして有名なMasonryにインスピレーションを受けたとあります。グリッドレイアウトの実装できるMasonryも、おすすめのプラグインですよ。
Scrollyeah
» GitHub – artpolikarpov/scrollyeah: Puts floats in single line.
スクロールは通常は縦にするものですが、Scrollyeahを使うと水平方向のスクロールを実装することができます。div要素にScrollyeahのclassを付けるだけでOKで、shadowsやmaxWidthなどのオプションも指定可能です。
PrognRoll
プログレスバーが実装ができるjQueryプラグインです。プログレスバーが実装できるプラグインは星の数ほどありますが、PrognRollはそれらのプラグインとはひと味違っています。
スクロールの進捗度合いを、プログレスバーとして表示できるのです。スクロールしていくと、画面の最上部に設置されたバーが進捗していく仕様です。どれくらいページを読み進めたかがわかる、ということですね。
HTML5 jQuery Canvas Overlay
マウスカーソルの位置を検知して、スポットライトのような効果が実装できるプラグインです。HTML5のcanvasを使って動作していて、目を惹くアニメーションにすることができます。
あとがき
アニメーションが実装できるjQueryプラグインを12つ取り上げてご紹介しました。どれも魅力的なアニメーションが付けられるので、ユーザーから興味を持ってもらうこともできるはず。うまくとり入れていってくださいね。