[JS]jQueryのプラグイン100選 -2013年総集編
Post on:2013年12月24日
今年も数多くの素晴らしいjQueryのプラグインがリリースされました。当ブログで紹介したものをはじめ、未紹介のものまで、jQueryのプラグイン100+α選です。
今年目立ったのは、アニメーションを使ったスクロール関連のスクリプト。
スクロール前提の1ページサイト、パララックスなど、コンテンツをより大きなサイズで楽しむものが増えました。また、スマフォ・タブレットに大きく影響を受けたインタラクションも目立ちましたね。
- 1ページコンテンツ用のスクロール関連
- パララックス スクロール関連
- スクロールで定位置関連
- その他スクロール操作・補助関連
- スクロールバー関連
- レスポンシブ関連
- エフェクト関連
- ナビゲーション関連
- レイアウト関連
- 画像ギャラリー関連
- 画像拡大・配置・キャプション関連
- コンテンツスライダー関連
- カルーセル関連
- アニメーション関連
- フォーム関連
- コンテンツのツアー関連
- テキスト関連
- タブ関連
- テーブル・リスト・チャート関連
- パネル・ボックス関連
- モーダルボックス・ツールチップ関連
- サウンド関連
- ユーザー最適化・ABテスト関連
- その他
1ページコンテンツ用のスクロール関連
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-01.png)
fullPage.js
ブラウザいっぱいに表示し、水平・垂直にスクロールしてコンテンツを表示します。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-02.png)
One Page Scroll
iPhone 5sのプロダクトページのように1ページに複数のパネルを垂直方向に配置し、スクロールエフェクトを使って見せます。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-08.png)
Panelize
縦長の1ページで構成されたコンテンツですが、パネルを一枚一枚めくるような面白いエフェクトで表示します。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-07.png)
jIntvertScroll
垂直方向にスクロールすると、コンテンツが「水平方向」に移動し、パララックスにも対応しています。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-79.png)
slideme
1ページで構成された垂直型のページに、水平型のスライドを設置できます。
パララックス スクロール関連
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-15.png)
Parallax.js
パネルをマトリックス状に配置し、水平・垂直に移動可能なパララックス用のスクリプト。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-16.png)
Jarallax
フェードを使った美しいアニメーションでコンテンツを表示するパララックス用のスクリプト。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-76.png)
Parallax.js
スマフォなどのジャイロスコープにも対応した一味違ったパララックスを実装します。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-17.png)
fullContent
ブラウザいっぱいにコンテンツを表示するパララックス用のスクリプト。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-18.png)
jQuery Parallax
背景と要素を異なるタイミングでスクロールに合わせて動かすパララックス用のスクリプト。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-19.png)
Scroll Path
スクロールすると、さまざまなパスに沿って要素が次々に表示されます。曲線や回転などのトリッキーな動きにも対応。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-22.png)
Scrolly
シンプルにパララックススクロールを実装するスクリプト。
スクロールで定位置関連
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-92.png)
Headroom.js
ヘッダをスクロールに合わせて固定表示するだけでなく、表示・非表示する1ランク便利なスクリプト。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-74.png)
Sticky Kit
スクロールしてもサイドバーなどの要素を貼り付けたように常に表示させます。複数の要素を異なる範囲でも対応。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-88.png)
autofix anything
スクロールに合わせてページ内のさまざまな要素を最適なポジション・スタイルで表示します。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-72.png)
Clingify
ヘッダをスクロールしても上部に固定表示するだけでなく、途中で変更もできます。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-03.png)
Scrolld.js
ページ上部にナビゲーションを固定表示し、アニメーションのスクロールでコンテンツを表示します。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-13.png)
Oh Snap
さまざまなメッセージを指定した位置にアニメーションで表示します。
スクロールしても定位置に表示され、フェードのエフェクトもさりげなくてかっこいい。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-67.png)
Smint
ナビゲーションを最上部に固定し、各セクションにアニメーションでスクロール移動させます。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-113.png)
End Page Box
ページの終わりの方までスクロールすると、パネルを表示します。
その他スクロール操作・補助関連
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-05.png)
AnimateScroll
スクロールに加速やバウンド、ちょっと通り過ぎて戻ったりといった30種類以上のアニメーションのエフェクトをつけたり、個別にスクロール後の位置補正もできます。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-06.png)
FancyScroll
スマフォやタブレットのようにページの終わりまでスクロールした際にバウンドするのをはじめ、ちょっと面白いさまざまなエフェクトをスクロールに与えます。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-47.png)
windows
垂直に配置したコンテンツをスクロールした時に、中途半端なスクロール位置でも指定した位置にスナップ(自動補正)させます。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-83.png)
pullupScroll
スクロールして次に表示するコンテンツを引っ張り上げるように表示します。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-45.png)
Hook.js
スマフォやタブレットのように、下に引っ張るとページをリフレッシュします。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-04.png)
FoldScroll
スクロールするとパネルが折れるように上へ吸い込まれます。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-21.png)
Scrollcue
オートキューやテレプロンプターのように、文章や歌詞、台詞、記事、原稿などのテキストを順番にスクロールして表示させます。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-09.png)
BackgroundCheck
スクロールを使ったコンテンツで困るのが、ナビゲーションなどの定位置要素の配色。背景の暗い明るいを自動で判定し、テキストなどを最適なカラーで表示します。
キャプチャは暗い背景の上なので、サークルは明るいカラーになっています。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-65.png)
Scrollsnap
スクロールした際に、見出しや画像などの要素が見切れるのを自動補正します。
スクロールバー関連
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-25.png)
custom content scroller
ページ内のコンテンツにスクロールバーを設置できます、入れ子や無限スクロールにも対応。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-41.png)
perfect-scrollbar
デザインを損なわないスクロールバーを設置します。
レスポンシブ関連
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-49.png)
Jresponsive
表示サイズに合わせて、さまざまな要素のサイズやレイアウトをアニメーションで変更します。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-100.png)
Rubberband
レスポンシブ用のブレイクポイントを最大最小幅、最大最小高さで複数設定し、それぞれに異なるアクションをセットできます。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-109.png)
Responsive Elements
ページ内のエレメントそれぞれにレスポンシブ用に最適なデザインを適用できます。
エフェクト関連
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-107.png)
Snap.js
フリックやドラッグ操作で、左右にコンテンツを移動し、サイドを表示します。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-87.png)
onScreen
要素がビューポートに表示される時にさまざまなエフェクトを与えます。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-50.png)
Navi.js
複数のページをブラウザのロード無しで、アニメーションで次々に表示します。
ナビゲーション関連
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-10.png)
Box Lid Menu
サイドのボタンをクリックすると、コンテンツを斜めに傾けダイナミックなアニメーションで、ナビゲーションを表示します。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-11.png)
Bounce Menu
バウンドするエフェクトが気持ちいい、スマフォ・タブレット用のナビゲーション。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-106.png)
Square menu
スクエア状のナビゲーションをアニメーションを使って表示します。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-97.png)
Sidr
コンテンツのサイドからアニメーションでぐいっとナビゲーションを表示します。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-115.png)
bigSlide
サイドからスライドのアニメーションでナビゲーションを表示するシンプルで軽量なタイプ。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-91.png)
Multi Level Push Menu
多階層のナビゲーションをサイドを利用し、プッシュのインタラクションを加えて配置します。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-98.png)
FlexNav
多階層のナビゲーションをデスクトップでもスマフォでも最適に表示します。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-60.png)
kamens
Amazonで使われているような操作性の優れたメガドロップ型のナビゲーション。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-105.png)
Navgoco
ul要素で実装した多階層のナビゲーションをアニメーションで開閉します。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-57.png)
Responsive Nav
レスポンシブ対応のシンプルながら高性能なすごいナビゲーション。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-99.png)
scrollNav
スクロールに追従するデザインもかわいいナビゲーション。
レイアウト関連
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-81.png)
diamonds.js
斜めのグリッドを使った美しいレイアウトを簡単に実装できます。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-58.png)
dylay
ぷるぷるっとかわいいアニメーションでレイアウトを変更します。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-80.png)
Freewall
Pinterestやウォールなどの最近よく見かけるカードを使ったレイアウトを作成します。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-104.png)
Shapeshift
Pinterest風レイアウトで、ドラッグ&ドロップで配置を変更できます。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-69.png)
waterfall
高さの異なるパネルをレンガ状に配置する機能最小限・実用性重視の超軽量スクリプト。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-68.png)
Mason.js
パネルをレンガ状に配置、他のスクリプトで生じる端も埋めます。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-31.png)
Nested
Pinterest風レイアウトを構築します、表示のアニメーションがかっこいい。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-30.png)
Volley
あらゆる要素を見た目のポジションに基づいて列・行に配置します。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-82.png)
Equal Height Columns 2.0
異なる高さのパネルを高いものに揃えたり、指定した高さに揃えます(バージョンアップ)。
画像ギャラリー関連
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-101.png)
least.js
レスポンシブ対応の非常に美しい画像ギャラリーを簡単に設置できます。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-103.png)
Fotorama
フルサイズでの表示にも対応した大迫力の画像ギャラリー。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-102.png)
jq-tiles
タイル状のアニメーションで画像を次々に表示する画像ギャラリー。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-27.png)
Photobox
CSS3アニメーションを使った軽量の画像ギャラリー。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-96.png)
CollagePlus
画像をさまざまなサイズのコンテナに自動でフィットさせます。
画像拡大・配置・キャプション関連
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-56.png)
Superbox
lightboxの進化形、レスポンシブ対応で画像を拡大表示します。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-75.png)
Image Scale
サイズが不明な画像を指定したエリアにフィットさせたり、配置を調整できます。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-48.png)
HCaptions
画像ホバーで、さまざまな要素を配置した半透明のパネルをアニメーションで表示します。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-86.png)
wallpaper
指定した要素内いっぱいに背景画像を最適に配置します。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-73.png)
TwentyTwenty
ビフォーアフターの2枚の画像を分かりやすく比較できるように表示します。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-108.png)
Unveil
1ページで構成された長いページなどに便利、画像を遅延ロードします。表示のカスタマイズも可。
コンテンツスライダー関連
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-26.png)
Destaque
パララックスエフェクトを伴ったスライドショー(デモがセクシーなので注意)。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-42.png)
FractionSlider
スライド内に複数の要素を配置し、それぞれ異なるタイミングで異なるアニメーションを設定できるスライダー。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-51.png)
unslider
キーボード操作やスワイプ操作にも対応した、シンプルなHTMLで実装するレスポンシブ対応のスライダー。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-64.png)
mmenu
スマフォアプリのように左右にスライドしてコンテンツを表示します。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-28.png)
Flowtime
パネルをマトリックス状に配置し、プレゼンテーションができます。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-53.png)
Bespoke
プレゼンなどに、複数のパネルを多彩なアニメーションで次々にスライドさせます。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-29.png)
slideToucher
水平・垂直のスワイプ操作に対応したタッチスクリーン用のプレゼンテーション。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-24.png)
jKit
スライドショー・ライトボックス・タブ・アコーディオンなど多種多様なUI関係を実装できます。
カルーセル関連
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-93.png)
Owl Carousel
スワイプ操作に対応したレスポンシブ対応のカルーセル。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-94.png)
Film Roll
映画のフィルムロールのようにパネルを次々に表示するカルーセル。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-112.png)
Scrollbox
リストで配置したアイテムを水平・垂直のカルーセルで表示します。
アニメーション関連
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-77.png)
animo.js
複数のCSSアニメーションを簡単に組み合わせて利用できます。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-34.png)
Lazy Line Painter
イラストのパスをアニメーションで描画します。
フォーム関連
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-40.png)
Parsley
軽量で実装も簡単なフォームのバリデーション。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-85.png)
Validetta
必須入力の有無やメールアドレスのチェックなどフォームのバリデーションをします。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-89.png)
label better
フォームにフォーカスすると、プレースホルダーに配置したラベルがアニメーションでぽんっと上に移動します。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-44.png)
FancyInput
フォームに入力する際、ちょっと面白いアニメーション(5種類)を与えます。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-52.png)
iCheck
フォームのデザインをミニマルやフラットにしたり、入力のコントロールなど機能を強化します。
コンテンツのツアー関連
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-55.png)
Chardin.js
ページ上に配置した要素それぞれに、説明などを添えるためのオーバーレイを作りだします。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-59.png)
Intro.js
ページのガイドを表示します。
テキスト関連
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-33.png)
Textillate
テキストをCSS3のさまざまなアニメーションで表示します。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-110.png)
Text Effects
ランダムな文字を次々に表示し、一つのテキストをアニメーションで生成します。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-84.png)
CircleType
画像を使わずに、テキストをかわいくサークル状に配置します。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-111.png)
jqVintageTxt
ターミナルのようなデザインでテキストをアニメーションで表示します。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-63.png)
rcrumbs
レスポンシブ対応でパンくずの一行が長くて困ったを解決します。
タブ関連
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-70.png)
Tabulous.js
スライドやフリップなど、4種類のエフェクトを備えたタブ。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-61.png)
BasicTabs
アニメーションでコンテンツを切り替えるシンプルなタブ。
テーブル・リスト・チャート関連
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-37.png)
ParamQuery
エクセルのような高性能の表を設置します。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-90.png)
ReStable
デスクトップ用に実装した表組みをスマフォでもいい感じに表示します。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-62.png)
Animated Table Sorter
かっこいいアニメーションでテーブルのデータをソートします。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-35.png)
Sortable
テーブルやリスト、ナビゲーションなどをソート可能にします。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-36.png)
Gantt
アニメーションで動作するガントチャートを作成します。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-114.png)
Pizza Pie Charts
円グラフをピッツァやドーナツに見立てて、ホール状のものから1ピースを抜き出すようなアニメーションがかわいいです。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-38.png)
bullet graph
アニメーションで動作するビュレットタイプのグラフを設置します。
パネル・ボックス関連
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-12.png)
Stacky
カード状の複数のパネルを積み重ね、アニメーションで折り畳みます。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-46.png)
Kontext
複数のパネルをiOS風のエフェクトで切り替えます。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-54.png)
CSSMatrix
不連続のレイヤーに要素を配置し、それぞれを分離して3Dにぐるぐる回転させます。
モーダルボックス・ツールチップ関連
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-66.png)
Pop Easy
テキストや画像、フォーム、動画、Google Mapsなどを配置できるモーダルウインドウを簡単に実装します。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-39.png)
Opentip
さまざまなスタイルが用意されたCANVASベースのツールチップ。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-95.png)
PowerTip
さまざまな方向にツールチップをアニメーションで表示します、追従にも対応。
サウンド関連
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-78.png)
Ion.Sound
ボタンのクリック時にちょっと音をつけるなど、イベントにサウンドを割り当てます。
ユーザー最適化・ABテスト関連
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-32.png)
Aware.JS
新規 or リピーター、時間帯など、ユーザーの訪問状況ごとにコンテンツを変更して表示します。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-71.png)
easyAB
Google Analyticsを使ったABテストが簡単にできます。
その他
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-23.png)
jQuery Migrate
jQuery1.9で削除された機能を補完し、過去のプラグインでも動作するようにします。2013年の最新版は1.2.1。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-43.png)
version.js
jQueryの複数のバージョンでのプラグインやウェブサイトの動作テストを簡単にできます。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-14.png)
device.js
iPhone, Androidなど、スマフォ・タブレット・デスクトップのデバイスを判定し、CSSのclassとして簡単に利用できます。
![デモのキャプチャ](/wp-content/uploads-201303/2013122401-20.png)
Arbitrary anchors
通常、要素のidを指定して#(ハッシュ)リンクさせるページ内アンカーを、idの指定以外にclassやpやfooterなどにも遷移することができます。また、個々にスクロールのスピードを変えることもできます。
sponsors