[JS]jQueryのプラグイン100選 -2010年総集編
Post on:2010年12月20日
2010年に紹介したものを中心としたjQueryのプラグイン100+α選です。
今年は、アニメーションのエフェクトやレイアウト、後半は背景画像関連のプラグインが特に目立っていたように思います。
[ad#ad-2]
- コンテンツスライダー・カルーセル関連
- ギャラリー・画像拡大関連
- ナビゲーション関連
- タブ関連
- パネル・ボックス関連
- ツールチップ関連
- レイアウト関連
- 背景画像関連
- その他UI関連
- アニメーション関連
- スクロール・ドラッグなど操作関連
- テーブル・リスト・データ関連
- フォーム関連
- コンテンツ生成
- その他
コンテンツスライダー・カルーセル関連
![デモのキャプチャ](/wp-content/uploads-2010/201006-11.png)
simpleSli.de
フレキシブルでシンプルで軽量なコンテンツスライダーの決定版。
![デモのキャプチャ](/wp-content/uploads-2010-2d/201012-30.png)
hash slider
個別リンクにも対応したコンテンツスライダー。
![デモのキャプチャ](/wp-content/uploads-2010-2d/201010-03.png)
Sudo Slider
各パネルがブックマークできるコンテンツスライダー。
![デモのキャプチャ](/wp-content/uploads-2010-2d/201010-19.png)
bxSlider
多彩な表示方法に対応したコンテンツスライダー。
![デモのキャプチャ](/wp-content/uploads-2010-2d/201012-21.png)
Choco-Slider
カスタマイズも簡単なフレキシブルな軽量のコンテンツスライダー。
![デモのキャプチャ](/wp-content/uploads-2010-2d/201012-23.png)
Tiny Circleslider
サークル状のコントローラーが面白いコンテンツスライダー。
![デモのキャプチャ](/wp-content/uploads-2010/201008-27.png)
Blockster transition effect
画像もテキストもブロック状に変更するコンテンツスライダー。
![デモのキャプチャ](/wp-content/uploads-2010/201008-10.png)
dualSlider
2つのパネルが独立して操作できるコンテンツスライダー。
![デモのキャプチャ](/wp-content/uploads-2010/201001-14.png)
Roundabout
要素をターンテーブルのようにくるくるっと表示。
ギャラリー・画像拡大関連
![デモのキャプチャ](/wp-content/uploads-2010/201006-16.png)
Micro Image Gallery
小さいスペースにも設置できる画像ギャラリー。
キャプチャは実物大。
![デモのキャプチャ](/wp-content/uploads-2010-2d/201012-02.png)
jQuery Panel Gallery Plugin 2.0
約60種類のエフェクトを備えた画像ギャラリー。
![デモのキャプチャ](/wp-content/uploads-2010/201006-17.png)
jSquares
グリッド状に画像を配置して、キャプションを表示。
![デモのキャプチャ](/wp-content/uploads-2010/201003-12.png)
Automatic Image Slider
ページング機能付きのイメージスライダー。
![デモのキャプチャ](/wp-content/uploads-2010/201008-03.png)
AviaSlider
8種類のエフェクトをもったスライドショー。
![デモのキャプチャ](/wp-content/uploads-2010/201003-01.png)
sexyCycle image jQuery plugin
画像をさまざまなアニメーションでスライド表示。
![デモのキャプチャ](/wp-content/uploads-2010-2d/201010-32.png)
imgZoom
ダイナミックなアニメーションで画像を拡大します。
![デモのキャプチャ](/wp-content/uploads-2010/201006-19.png)
jQuery.popeye 2.0
モーダルウインドウを使用しないインライン型の画像拡大スクリプト。
![デモのキャプチャ](/wp-content/uploads-2010/201003-20.png)
YoxView
画像をスタイリッシュに拡大表示するスライドショー。
![デモのキャプチャ](/wp-content/uploads-2010/201003-33.png)
Reel
画像内のオブジェクトをドラッグとホイールで360度回転させる。
![デモのキャプチャ](/wp-content/uploads-2010/201006-32.png)
Cloud Zoom
さまざまなスタイルで画像を拡大表示。
![デモのキャプチャ](/wp-content/uploads-2010/201008-22.png)
ImageHighlighter
画像の一部をハイライト表示。
![デモのキャプチャ](/wp-content/uploads-2010/201008-16.png)
maphilight
地図のような複雑な形状をハイライト表示。
![デモのキャプチャ](/wp-content/uploads-2010-2d/201012-04.png)
jQuery-Notes
Flickrのように画像にメモを書き込めるようにします。
![デモのキャプチャ](/wp-content/uploads-2010/201008-29.png)
IMAGE BLUR
画像にブラー効果を与えます。
![デモのキャプチャ](/wp-content/uploads-2010-2d/201010-10.png)
Inset Border Effect
画像にアニメーションするボーダーのエフェクトを加えます。
ナビゲーション関連
![デモのキャプチャ](/wp-content/uploads-2010/201008-06.png)
hoverFade
マウスのホバーにフェード効果を与えます。
![デモのキャプチャ](/wp-content/uploads-2010/201003-11.png)
MagicLine Navigation
LavaLampスタイルのナビゲーション。
![デモのキャプチャ](/wp-content/uploads-2010/201001-07.png)
Fresh Content Accordion
アニメーションの動作が気持ちいいアコーディオン。
![デモのキャプチャ](/wp-content/uploads-2010-2d/201010-26.png)
hoverfade
マウスホバーで画像をフェードで変更します。
![デモのキャプチャ](/wp-content/uploads-2010-2d/201010-08.png)
Panel Magic
マトリックス状のパネルを使ったダイナミックなナビゲーション。
![デモのキャプチャ](/wp-content/uploads-2010-2d/201010-25.png)
NavIt
複数の開閉に対応した、多段階層用ナビゲーション。
![デモのキャプチャ](/wp-content/uploads-2010/201006-12.png)
Slick Drop down Menu with Easing Effect
滑らかなアニメーションを備えたドロップダウン。
![デモのキャプチャ](/wp-content/uploads-2010/201003-22.png)
BubbleUP
アイコンをふんわりとアニメーションで拡大表示。
![デモのキャプチャ](/wp-content/uploads-2010-2d/201012-14.png)
jqDock
水平・垂直、揃えなどさまざまなタイプを用意したMac風のDock Menu。
タブ関連
![デモのキャプチャ](/wp-content/uploads-2010/201006-21.png)
Dynamic Page / Replacing Content
JavaScriptがオフでも遷移するタブコンテンツ。
![デモのキャプチャ](/wp-content/uploads-2010/201006-15.png)
TTabs
タブになる要素を自由に指定できるタブコンテンツ。
![デモのキャプチャ](/wp-content/uploads-2010-2d/201012-06.png)
jQuery Smooth Tabs Plugin
フェードのアニメーションで切り替えるシンプルなタブ。
パネル・ボックス関連
![デモのキャプチャ](/wp-content/uploads-2010/201008-04.png)
Pines Notify
一定の時間、注釈のパネルを表示します。
![デモのキャプチャ](/wp-content/uploads-2010/201006-33.png)
Lightbox_me
DOM要素を指定して拡大表示できるLightbox。
![デモのキャプチャ](/wp-content/uploads-2010/201006-04.png)
jQuery modalBox
画像やAJAXに対応したドラッグで移動も可能なオープンソースのモーダルボックス。
![デモのキャプチャ](/wp-content/uploads-2010/201001-21.png)
Notify Bar
メッセージやエラーやアラートなどをブラウザ上部からスライド表示。
![デモのキャプチャ](/wp-content/uploads-2010-2d/201012-09.png)
SlideNote
アニメーションでスライドするパネルを表示します。
![デモのキャプチャ](/wp-content/uploads-2010-2d/201012-24.png)
Sidebar Plugin for bloggers
スクロールに追従するパネルをブラウザの端に表示します。
![デモのキャプチャ](/wp-content/uploads-2010-2d/201010-27.png)
Easy Accordion
パネルをアコーディオンのアニメーションでスライドさせます。
ツールチップ関連
![デモのキャプチャ](/wp-content/uploads-2010/201003-09.png)
tinyTips
軽量だけどフレキシブルなツールチップ。
![デモのキャプチャ](/wp-content/uploads-2010/201008-31.png)
Colortip
6つのカラーが用意されたシンプルなツールチップ。
![デモのキャプチャ](/wp-content/uploads-2010-2d/201010-21.png)
LDTT - super small tooltip
超軽量(1KB)の表示位置・フェードなどカスタマイズも可能なツールチップ。
レイアウト関連
![デモのキャプチャ](/wp-content/uploads-2010/201003-04.png)
Create Your Own Sliding Resizable Grid
アニメーションでグリッドレイアウトを生成。
![デモのキャプチャ](/wp-content/uploads-2010/201001-06.png)
Masonry
パネルを隙間なくレンガ風に配置。
![デモのキャプチャ](/wp-content/uploads-2010/201008-02.png)
jLayout
4つのレイアウトアルゴリズムを提供。
![デモのキャプチャ](/wp-content/uploads-2010-2d/201010-06.png)
Equal Column Heights
高さの異なるカラムを揃えます(アニメーション可)。
![デモのキャプチャ](/wp-content/uploads-2010/201006-31.png)
The Footer Plugin
コンテンツの量が少なくてもフッタをブラウザの下部に表示。
![デモのキャプチャ](/wp-content/uploads-2010-2d/201010-20.png)
Zoomooz
ページ内のあらゆるエレメントをズームしてナビゲーションさせます。
[ad#ad-2]
背景画像関連
![デモのキャプチャ](/wp-content/uploads-2010-2d/201012-27.png)
Backstretch
リサイズにも対応、背景画像をブラウザの枠いっぱいに表示します。
![デモのキャプチャ](/wp-content/uploads-2010-2d/201012-17.png)
fullscreenr
オーバーレイさせて背景画像をブラウザいっぱいに表示。
![デモのキャプチャ](/wp-content/uploads-2010-2d/201012-12.png)
Transify
エレメントの背景の不透明度をコントロール、アニメーションにも対応。
![デモのキャプチャ](/wp-content/uploads-2010-2d/201012-03.png)
retina
一枚の画像でサムネイルと拡大表示機能を実装します。
![デモのキャプチャ](/wp-content/uploads-2010-2d/201012-18.png)
Supersized
画像をブラウザいっぱいに表示する画像ギャラリー。
![デモのキャプチャ](/wp-content/uploads-2010/201006-06.png)
jbgallery 2.0 BETA
背景をダイナミックにギャラリーとして活用。
![デモのキャプチャ](/wp-content/uploads-2010/201001-25.png)
jAni
再生機能もついた背景画像でアニメーション。
その他UI関連
![デモのキャプチャ](/wp-content/uploads-2010-2d/201010-18.png)
Biggerlink
リンクの領域を指定したエレメント全体に変更します。
![デモのキャプチャ](/wp-content/uploads-2010/201006-26.png)
Zoomooz.js
ページ内のあらゆる箇所をアニメーションでズーム表示。
![デモのキャプチャ](/wp-content/uploads-2010/201003-31.png)
jsPlumb
エレメントを移動可能なパイプでつなぐ。
![デモのキャプチャ](/wp-content/uploads-2010/201006-27.png)
HoverAttribute
ホバーでテキストリンクのhrefやtitleのデータを表示。
![デモのキャプチャ](/wp-content/uploads-2010/201003-25.png)
DivCorners
div要素の内側でも外側でも角丸を配置。
![デモのキャプチャ](/wp-content/uploads-2010/201003-24.png)
Link Underlines Grow to Backgrounds on Hover
複数行に渡るテキストでも背景をホバーでハイライト。
アニメーション関連
![デモのキャプチャ](/wp-content/uploads-2010/201001-15.png)
hoverFlow
jQueryのアニメーション機能をよりスムーズに。
![デモのキャプチャ](/wp-content/uploads-2010-2d/201012-28.png)
Pageswitch
ページ遷移にスライドやフェードのアニメーションを加えます。
![デモのキャプチャ](/wp-content/uploads-2010/201008-17.png)
Canimate
GIF以外の画像でもアニメーションに。
![デモのキャプチャ](/wp-content/uploads-2010/201006-02.png)
jQuery.spritely
任意の要素や背景をアニメーション。
![デモのキャプチャ](/wp-content/uploads-2010-2d/201010-30.png)
Quovolver
指定したエレメント群をアニメーションを使って順番に表示します。
![デモのキャプチャ](/wp-content/uploads-2010/201006-23.png)
Circulate
円の軌跡とイージングを使用してあらゆる要素をアニメーション。
![デモのキャプチャ](/wp-content/uploads-2010/201006-18.png)
Shadow Motion Effect in 5 Lines
残像っぽく不透明度をアニメーション。
![デモのキャプチャ](/wp-content/uploads-2010/201008-12.png)
Shadow animation
シャドウをアニメーション。
![デモのキャプチャ](/wp-content/uploads-2010/201008-23.png)
bgFade
マウスホバーで背景をフェードでアニメーション。
スクロール・ドラッグなど操作関連
![デモのキャプチャ](/wp-content/uploads-2010-2d/201012-00.png)
スムーズ ページスクローラー
ページ内アンカーにスムーズにスクロール、外部リンクにも対応。
商用でも無料になりました。
![デモのキャプチャ](/wp-content/uploads-2010-2d/201010-24.png)
Tiny Scrollbar
コンテンツに垂直・水平のスクロールバーを設置できます。
![デモのキャプチャ](/wp-content/uploads-2010/201006-05.png)
AjaxScroll
垂直・水平に対応したAJAXコンテンツのスクロール。
![デモのキャプチャ](/wp-content/uploads-2010-2d/201012-11.png)
Infinitely Draggable Content Area
コンテンツ内の全ての要素をドラッグで移動可能。
テーブル・リスト・データ関連
![デモのキャプチャ](/wp-content/uploads-2010/201003-18.png)
TargetTable
カーソルに合わせてテーブルのセルをハイライト。
![デモのキャプチャ](/wp-content/uploads-2010/201003-29.png)
PicNet Table Filter
テーブルのデータを素早くフィルタリング。
![デモのキャプチャ](/wp-content/uploads-2010/201006-20.png)
Easy List Splitter
リストを水平・垂直に自由に配置。
![デモのキャプチャ](/wp-content/uploads-2010/201001-16.png)
TufteGraph
きれいな棒グラフを簡単に作成。
フォーム関連
![デモのキャプチャ](/wp-content/uploads-2010/201001-22.png)
Form Tips
フォームのデフォルトにメッセージを表示。
![デモのキャプチャ](/wp-content/uploads-2010/201001-28.png)
Form Design with Sliding Labels
マウスをフォーカスすると、ラベルがスライド移動。
![デモのキャプチャ](/wp-content/uploads-2010/201008-13.png)
FormLabels Plugin
フォームのラベルを表示。パスワードにも対応。
![デモのキャプチャ](/wp-content/uploads-2010-2d/201010-11.png)
Textbox Hinter
フォームにスタイルシートを適用できるテキストを表示します。
![デモのキャプチャ](/wp-content/uploads-2010/201006-30.png)
AutoTabIndex
設定した文字数を超えると、自動で次の入力欄へ移動。
![デモのキャプチャ](/wp-content/uploads-2010/201008-14.png)
Elastic
テキストエリアを文字量に合わせて自動拡大。
![デモのキャプチャ](/wp-content/uploads-2010/201001-27.png)
Simplest Twitter-like dynamic character count
Twitterのように入力できる残りの文字数を表示。
![デモのキャプチャ](/wp-content/uploads-2010/201008-19.png)
validity
クライアントサイドのフォームのvalidation。
![デモのキャプチャ](/wp-content/uploads-2010-2d/201010-12.png)
Show Password
パスワードを一時的に可視状態にします。
![デモのキャプチャ](/wp-content/uploads-2010/201008-20.png)
Ie-select-width
IEでwidthを指定したセレクトボックスでも中身を全部表示。
コンテンツ生成
![デモのキャプチャ](/wp-content/uploads-2010-2d/201012-07.png)
jTweetsAnywhere
@Anywhereにも対応、Twitterコンテンツをカスタマイズしてサイトに設置。
![デモのキャプチャ](/wp-content/uploads-2010/201008-15.png)
Simple FAQ
パネルが開閉するシンプルなFAQコンテンツ。
![デモのキャプチャ](/wp-content/uploads-2010/201006-28.png)
Pajinate
長いリストやコンテンツをフレキシブルにページネーション化。
![デモのキャプチャ](/wp-content/uploads-2010/201008-11.png)
jQuery.Syntax
25種類の言語をサポートしたシンタックスハイライター。
![デモのキャプチャ](/wp-content/uploads-2010-2d/201012-20.png)
Snippet
15の言語に対応したシンタックスハイライター。デザインは39種類。
![デモのキャプチャ](/wp-content/uploads-2010-2d/201012-16.png)
GMAP3
Google Mapsにオリジナルのマークやポリゴン、任意の画像などを加えて簡単に設置できます。
![デモのキャプチャ](/wp-content/uploads-2010-2d/201010-05.png)
bMap
アイコンなどマークを配置したGoogle Mapsを簡単に設置できます。
その他
![デモのキャプチャ](/wp-content/uploads-2010-2d/201012-08.png)
Phono
ブラウザを電話にしてインスタントメッセージを送れるようにします。
![デモのキャプチャ](/wp-content/uploads-2010-2d/201012-32.png)
Lazy Loading Video
動画をLazy Load対応にします。
![デモのキャプチャ](/wp-content/uploads-2010/201001-17.png)
#grid
ページにグリッドを表示。
![デモのキャプチャ](/wp-content/uploads-2010/201006-24.png)
Griddy
ページにグリッドを表示し、サイズを自動で算出。
![デモのキャプチャ](/wp-content/uploads-2010/201008-08.png)
Sexy.js
AJAXを強化する軽量スクリプト。
![デモのキャプチャ](/wp-content/uploads-2010/201006-09.png)
prettyLoader
AJAXコンテンツを読み込む時のローダー。
![デモのキャプチャ](/wp-content/uploads-2010-2d/201010-29.png)
jQuery webcam plugin
Webカメラを操作できるようにします。
sponsors