[JS]jQueryのプラグイン100選 -2013年総集編

今年も数多くの素晴らしいjQueryのプラグインがリリースされました。当ブログで紹介したものをはじめ、未紹介のものまで、jQueryのプラグイン100+α選です。

今年目立ったのは、アニメーションを使ったスクロール関連のスクリプト。
スクロール前提の1ページサイト、パララックスなど、コンテンツをより大きなサイズで楽しむものが増えました。また、スマフォ・タブレットに大きく影響を受けたインタラクションも目立ちましたね。

• 1ページコンテンツ用のスクロール関連
• パララックス スクロール関連
• スクロールで定位置関連
• その他スクロール操作・補助関連
• スクロールバー関連
• レスポンシブ関連
• エフェクト関連
• ナビゲーション関連
• レイアウト関連
• 画像ギャラリー関連
• 画像拡大・配置・キャプション関連
• コンテンツスライダー関連
• カルーセル関連
• アニメーション関連
• フォーム関連
• コンテンツのツアー関連
• テキスト関連
• タブ関連
• テーブル・リスト・チャート関連
• パネル・ボックス関連
• モーダルボックス・ツールチップ関連
• サウンド関連
• ユーザー最適化・ABテスト関連
• その他

1ページコンテンツ用のスクロール関連

fullPage.js
ブラウザいっぱいに表示し、水平・垂直にスクロールしてコンテンツを表示します。

One Page Scroll
iPhone 5sのプロダクトページのように1ページに複数のパネルを垂直方向に配置し、スクロールエフェクトを使って見せます。

Panelize
縦長の1ページで構成されたコンテンツですが、パネルを一枚一枚めくるような面白いエフェクトで表示します。

jIntvertScroll
垂直方向にスクロールすると、コンテンツが「水平方向」に移動し、パララックスにも対応しています。

slideme
1ページで構成された垂直型のページに、水平型のスライドを設置できます。

パララックス スクロール関連

Parallax.js
パネルをマトリックス状に配置し、水平・垂直に移動可能なパララックス用のスクリプト。

Jarallax
フェードを使った美しいアニメーションでコンテンツを表示するパララックス用のスクリプト。

Parallax.js
スマフォなどのジャイロスコープにも対応した一味違ったパララックスを実装します。

fullContent
ブラウザいっぱいにコンテンツを表示するパララックス用のスクリプト。

jQuery Parallax
背景と要素を異なるタイミングでスクロールに合わせて動かすパララックス用のスクリプト。

Scroll Path
スクロールすると、さまざまなパスに沿って要素が次々に表示されます。曲線や回転などのトリッキーな動きにも対応。

Scrolly
シンプルにパララックススクロールを実装するスクリプト。

スクロールで定位置関連

Headroom.js
ヘッダをスクロールに合わせて固定表示するだけでなく、表示・非表示する1ランク便利なスクリプト。

Sticky Kit
スクロールしてもサイドバーなどの要素を貼り付けたように常に表示させます。複数の要素を異なる範囲でも対応。

autofix anything
スクロールに合わせてページ内のさまざまな要素を最適なポジション・スタイルで表示します。

Clingify
ヘッダをスクロールしても上部に固定表示するだけでなく、途中で変更もできます。

Scrolld.js
ページ上部にナビゲーションを固定表示し、アニメーションのスクロールでコンテンツを表示します。

Oh Snap
さまざまなメッセージを指定した位置にアニメーションで表示します。
スクロールしても定位置に表示され、フェードのエフェクトもさりげなくてかっこいい。

Smint
ナビゲーションを最上部に固定し、各セクションにアニメーションでスクロール移動させます。

End Page Box
ページの終わりの方までスクロールすると、パネルを表示します。

その他スクロール操作・補助関連

AnimateScroll
スクロールに加速やバウンド、ちょっと通り過ぎて戻ったりといった30種類以上のアニメーションのエフェクトをつけたり、個別にスクロール後の位置補正もできます。

FancyScroll
スマフォやタブレットのようにページの終わりまでスクロールした際にバウンドするのをはじめ、ちょっと面白いさまざまなエフェクトをスクロールに与えます。

windows
垂直に配置したコンテンツをスクロールした時に、中途半端なスクロール位置でも指定した位置にスナップ（自動補正）させます。

pullupScroll
スクロールして次に表示するコンテンツを引っ張り上げるように表示します。

Hook.js
スマフォやタブレットのように、下に引っ張るとページをリフレッシュします。

FoldScroll
スクロールするとパネルが折れるように上へ吸い込まれます。

Scrollcue
オートキューやテレプロンプターのように、文章や歌詞、台詞、記事、原稿などのテキストを順番にスクロールして表示させます。

BackgroundCheck
スクロールを使ったコンテンツで困るのが、ナビゲーションなどの定位置要素の配色。背景の暗い明るいを自動で判定し、テキストなどを最適なカラーで表示します。
キャプチャは暗い背景の上なので、サークルは明るいカラーになっています。

Scrollsnap
スクロールした際に、見出しや画像などの要素が見切れるのを自動補正します。

スクロールバー関連

custom content scroller
ページ内のコンテンツにスクロールバーを設置できます、入れ子や無限スクロールにも対応。

perfect-scrollbar
デザインを損なわないスクロールバーを設置します。

レスポンシブ関連

Jresponsive
表示サイズに合わせて、さまざまな要素のサイズやレイアウトをアニメーションで変更します。

Rubberband
レスポンシブ用のブレイクポイントを最大最小幅、最大最小高さで複数設定し、それぞれに異なるアクションをセットできます。

Responsive Elements
ページ内のエレメントそれぞれにレスポンシブ用に最適なデザインを適用できます。

エフェクト関連

Snap.js
フリックやドラッグ操作で、左右にコンテンツを移動し、サイドを表示します。

onScreen
要素がビューポートに表示される時にさまざまなエフェクトを与えます。

Navi.js
複数のページをブラウザのロード無しで、アニメーションで次々に表示します。

ナビゲーション関連

Box Lid Menu
サイドのボタンをクリックすると、コンテンツを斜めに傾けダイナミックなアニメーションで、ナビゲーションを表示します。

Bounce Menu
バウンドするエフェクトが気持ちいい、スマフォ・タブレット用のナビゲーション。

Square menu
スクエア状のナビゲーションをアニメーションを使って表示します。

Sidr
コンテンツのサイドからアニメーションでぐいっとナビゲーションを表示します。

bigSlide
サイドからスライドのアニメーションでナビゲーションを表示するシンプルで軽量なタイプ。

Multi Level Push Menu
多階層のナビゲーションをサイドを利用し、プッシュのインタラクションを加えて配置します。

FlexNav
多階層のナビゲーションをデスクトップでもスマフォでも最適に表示します。

kamens
Amazonで使われているような操作性の優れたメガドロップ型のナビゲーション。

Navgoco
ul要素で実装した多階層のナビゲーションをアニメーションで開閉します。

Responsive Nav
レスポンシブ対応のシンプルながら高性能なすごいナビゲーション。

scrollNav
スクロールに追従するデザインもかわいいナビゲーション。

レイアウト関連

diamonds.js
斜めのグリッドを使った美しいレイアウトを簡単に実装できます。

dylay
ぷるぷるっとかわいいアニメーションでレイアウトを変更します。

Freewall
Pinterestやウォールなどの最近よく見かけるカードを使ったレイアウトを作成します。

Shapeshift
Pinterest風レイアウトで、ドラッグ&ドロップで配置を変更できます。

waterfall
高さの異なるパネルをレンガ状に配置する機能最小限・実用性重視の超軽量スクリプト。

Mason.js
パネルをレンガ状に配置、他のスクリプトで生じる端も埋めます。

Nested
Pinterest風レイアウトを構築します、表示のアニメーションがかっこいい。

Volley
あらゆる要素を見た目のポジションに基づいて列・行に配置します。

Equal Height Columns 2.0
異なる高さのパネルを高いものに揃えたり、指定した高さに揃えます（バージョンアップ）。

画像ギャラリー関連

least.js
レスポンシブ対応の非常に美しい画像ギャラリーを簡単に設置できます。

Fotorama
フルサイズでの表示にも対応した大迫力の画像ギャラリー。

jq-tiles
タイル状のアニメーションで画像を次々に表示する画像ギャラリー。

Photobox
CSS3アニメーションを使った軽量の画像ギャラリー。

CollagePlus
画像をさまざまなサイズのコンテナに自動でフィットさせます。

画像拡大・配置・キャプション関連

Superbox
lightboxの進化形、レスポンシブ対応で画像を拡大表示します。

Image Scale
サイズが不明な画像を指定したエリアにフィットさせたり、配置を調整できます。

HCaptions
画像ホバーで、さまざまな要素を配置した半透明のパネルをアニメーションで表示します。

wallpaper
指定した要素内いっぱいに背景画像を最適に配置します。

TwentyTwenty
ビフォーアフターの2枚の画像を分かりやすく比較できるように表示します。

Unveil
1ページで構成された長いページなどに便利、画像を遅延ロードします。表示のカスタマイズも可。

コンテンツスライダー関連

Destaque
パララックスエフェクトを伴ったスライドショー（デモがセクシーなので注意）。

FractionSlider
スライド内に複数の要素を配置し、それぞれ異なるタイミングで異なるアニメーションを設定できるスライダー。

unslider
キーボード操作やスワイプ操作にも対応した、シンプルなHTMLで実装するレスポンシブ対応のスライダー。

mmenu
スマフォアプリのように左右にスライドしてコンテンツを表示します。

Flowtime
パネルをマトリックス状に配置し、プレゼンテーションができます。

Bespoke
プレゼンなどに、複数のパネルを多彩なアニメーションで次々にスライドさせます。

slideToucher
水平・垂直のスワイプ操作に対応したタッチスクリーン用のプレゼンテーション。

jKit
スライドショー・ライトボックス・タブ・アコーディオンなど多種多様なUI関係を実装できます。

カルーセル関連

Owl Carousel
スワイプ操作に対応したレスポンシブ対応のカルーセル。

Film Roll
映画のフィルムロールのようにパネルを次々に表示するカルーセル。

Scrollbox
リストで配置したアイテムを水平・垂直のカルーセルで表示します。

アニメーション関連

animo.js
複数のCSSアニメーションを簡単に組み合わせて利用できます。

Lazy Line Painter
イラストのパスをアニメーションで描画します。

フォーム関連

Parsley
軽量で実装も簡単なフォームのバリデーション。

Validetta
必須入力の有無やメールアドレスのチェックなどフォームのバリデーションをします。

label better
フォームにフォーカスすると、プレースホルダーに配置したラベルがアニメーションでぽんっと上に移動します。

FancyInput
フォームに入力する際、ちょっと面白いアニメーション（5種類）を与えます。

iCheck
フォームのデザインをミニマルやフラットにしたり、入力のコントロールなど機能を強化します。

コンテンツのツアー関連

Chardin.js
ページ上に配置した要素それぞれに、説明などを添えるためのオーバーレイを作りだします。

Intro.js
ページのガイドを表示します。

テキスト関連

Textillate
テキストをCSS3のさまざまなアニメーションで表示します。

Text Effects
ランダムな文字を次々に表示し、一つのテキストをアニメーションで生成します。

CircleType
画像を使わずに、テキストをかわいくサークル状に配置します。

jqVintageTxt
ターミナルのようなデザインでテキストをアニメーションで表示します。

rcrumbs
レスポンシブ対応でパンくずの一行が長くて困ったを解決します。

タブ関連

Tabulous.js
スライドやフリップなど、4種類のエフェクトを備えたタブ。

BasicTabs
アニメーションでコンテンツを切り替えるシンプルなタブ。

テーブル・リスト・チャート関連

ParamQuery
エクセルのような高性能の表を設置します。

ReStable
デスクトップ用に実装した表組みをスマフォでもいい感じに表示します。

Animated Table Sorter
かっこいいアニメーションでテーブルのデータをソートします。

Sortable
テーブルやリスト、ナビゲーションなどをソート可能にします。

Gantt
アニメーションで動作するガントチャートを作成します。

Pizza Pie Charts
円グラフをピッツァやドーナツに見立てて、ホール状のものから1ピースを抜き出すようなアニメーションがかわいいです。

bullet graph
アニメーションで動作するビュレットタイプのグラフを設置します。

パネル・ボックス関連

Stacky
カード状の複数のパネルを積み重ね、アニメーションで折り畳みます。

Kontext
複数のパネルをiOS風のエフェクトで切り替えます。

CSSMatrix
不連続のレイヤーに要素を配置し、それぞれを分離して3Dにぐるぐる回転させます。

モーダルボックス・ツールチップ関連

Pop Easy
テキストや画像、フォーム、動画、Google Mapsなどを配置できるモーダルウインドウを簡単に実装します。

Opentip
さまざまなスタイルが用意されたCANVASベースのツールチップ。

PowerTip
さまざまな方向にツールチップをアニメーションで表示します、追従にも対応。

サウンド関連

Ion.Sound
ボタンのクリック時にちょっと音をつけるなど、イベントにサウンドを割り当てます。

ユーザー最適化・ABテスト関連

Aware.JS
新規 or リピーター、時間帯など、ユーザーの訪問状況ごとにコンテンツを変更して表示します。

easyAB
Google Analyticsを使ったABテストが簡単にできます。

その他

jQuery Migrate
jQuery1.9で削除された機能を補完し、過去のプラグインでも動作するようにします。2013年の最新版は1.2.1。

version.js
jQueryの複数のバージョンでのプラグインやウェブサイトの動作テストを簡単にできます。

device.js
iPhone, Androidなど、スマフォ・タブレット・デスクトップのデバイスを判定し、CSSのclassとして簡単に利用できます。

Arbitrary anchors
通常、要素のidを指定して#（ハッシュ）リンクさせるページ内アンカーを、idの指定以外にclassやpやfooterなどにも遷移することができます。また、個々にスクロールのスピードを変えることもできます。