Webページの隠し味に!アニメーションが実装できるjQueryプラグイン12選

jQuery

2017年05月03日

Webページの隠し味に!アニメーションが実装できるjQueryプラグイン12選

Webページの要素にアニメーションが付けられるjQueryプラグインについてまとめました。デザインでのちょっとしたアクセントになるだけでなく、使いようによってはユーザビリティ向上にもつなげられます。とはいえ、使いすぎは禁物です。使いどころをよく考えながら、上手に使っていきましょう。

Animate.css

Animate.css

» Animate.css

その名の通り、アニメーションが実装できるjQueryプラグインです。使えるアニメーションの数がとても多いことが特徴的でしょう。

「Bounce(バウンス)」や「Fading(フェードイン、フェードアウト)」などのよく知られたものから、「hinge(ヒンジ)」などおもしろいアクションも使えます。

Hover.css

Hover.css

» Hover.css – A collection of CSS3 powered hover effects

その名の通り、要素にホバーした時のアニメーションが実装できるプラグインです。ホバーエフェクトと聞くとあまりおもしろみがないように思えますが、Hover.cssは非常にたくさんのアニメーションが使えます。

要素の外枠(border)や背景(background)をtransitionさせたり、アイコンだけを動かすことも可能です。他にも目を惹くアニメーションが使えるので、一度デモを見ることをおすすめします。

Velocity.js

Velocity.js

» Velocity.js

さまざまなアニメーションが実装できるjQueryプラグインです。transformやeasing、ループなどのアニメーションを簡単に導入することができます。

公式サイトには、詳細なドキュメントやサンプルコードが掲載してあります。導入する時の参考になるでしょう。なお本プラグインはjQueryのプラグインなのですが、jQueryなしでも動作させることができます。

CSShake

CSShake

» CSShake

HTML要素をぶるぶるとふるわせるアニメーションが実装できるプラグインです。アニメーションの種類も豊富で、10を超えるパターンから選ぶことができます。

jQuery Vortex

jQuery Vortex

» jQuery Vortex

HTML要素を、立体的に回転させることができるjQueryプラグインです。回転させる向きやスピード、回転量、初期位置など細かく指定ができます。

使い方はとても簡単で、divなどのボックス要素にIDを指定するだけでOKです。ギャラリーページなど、視覚的に訴えたいケースで活用できるでしょう。

jQuery Easing Plugin

jQuery Easing Plugin

» jQuery Easing Plugin

さまざまなeasing(イージング)が実装できるプラグインです。選択できるeasingは32種類と豊富で、ニーズに合わせてさまざまなアニメーションが実装できると言えるでしょう。

Choreographer-js

Choreographer-js

» Choreographer-js

さまざまなCSSアニメーションが実装できるjQueryプラグインです。複雑なアニメーションも、数行のコードで設定することができます。GitHubのデモページでは、スクロールに従って文字が回転したり、色が変わったりするアニメーションが見られます。

tabtab.js

tabtab.js

» tabtab.js – jquery animated tabs plugin

タブの遷移にアニメーションを追加してくれるjQueryプラグインです。無味乾燥なタブ遷移を、スムーズかつキャッチーなものにしてくれます。タブを使うことは多いので、導入できるシーンは多いでしょう。

なお、tabtab.jsを動作させるには、前出のVelocity.jsを併用する必要があります。

jQuery.Shapeshift

jQuery.Shapeshift

» jQuery.Shapeshift

Pinterestのようにグリッド状にレイアウトされた要素を、ドラッグアンドドロップで移動できるようにするjQueryプラグインです。レスポンシブデザインに対応していて、スマホなどのタッチして操作する端末にも対応可能です。

jQuery.Shapeshiftの制作者は、同じくjQueryプラグインとして有名なMasonryにインスピレーションを受けたとあります。グリッドレイアウトの実装できるMasonryも、おすすめのプラグインですよ。

Scrollyeah

Scrollyeah

» GitHub – artpolikarpov/scrollyeah: Puts floats in single line.

スクロールは通常は縦にするものですが、Scrollyeahを使うと水平方向のスクロールを実装することができます。div要素にScrollyeahのclassを付けるだけでOKで、shadowsやmaxWidthなどのオプションも指定可能です。

PrognRoll

PrognRoll

» jQuery Rain | PrognRoll | A tiny, lightweight jQuery plugin that creates scroll progress bar on the page

プログレスバーが実装ができるjQueryプラグインです。プログレスバーが実装できるプラグインは星の数ほどありますが、PrognRollはそれらのプラグインとはひと味違っています。

スクロールの進捗度合いを、プログレスバーとして表示できるのです。スクロールしていくと、画面の最上部に設置されたバーが進捗していく仕様です。どれくらいページを読み進めたかがわかる、ということですね。

HTML5 jQuery Canvas Overlay

HTML5 jQuery Canvas Overlay

» HTML5 jQuery Canvas Overlay

マウスカーソルの位置を検知して、スポットライトのような効果が実装できるプラグインです。HTML5のcanvasを使って動作していて、目を惹くアニメーションにすることができます。

あとがき

アニメーションが実装できるjQueryプラグインを12つ取り上げてご紹介しました。どれも魅力的なアニメーションが付けられるので、ユーザーから興味を持ってもらうこともできるはず。うまくとり入れていってくださいね。

カテゴリ

最新記事

今すぐ無料でお見積もりを依頼する

「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」そんな時は、制作業者様とのやり取りに特化した、信頼と安心のくまWebにご依頼ください。