[JS]jQueryのプラグイン100選 -2011年総集編
Post on:2011年12月12日
sponsors
2011年に紹介したものを中心としたjQueryのプラグイン100+α選です。
今年はCSS3の影響もあってかアニメーションのエフェクトが目立ちました。また、Resposive Web Design用の可変ものや動画・テキストを扱ったものも多かったですね。
[ad#ad-2]
- 動画関連
- 画像ギャラリー関連
- 画像拡大関連
- 画像配置・キャプション関連
- 背景画像関連
- コンテンツスライダー・カルーセル関連
- タブ関連
- ナビゲーション関連
- レイアウト関連
- パネル・ボックス関連
- ツールチップ・ティッカー関連
- アニメーション関連
- エフェクト関連
- スクロール操作・スクロールコンテンツ関連
- リスト関連
- テーブル関連
- フォーム関連
- テキスト関連
- 見出し抽出関連
- ローディング関連
- エレメント・コンテンツ生成
- その他
動画関連
tubular
背景いっぱいにYouTubeの動画を表示します。
YTPlayer
body要素や各エレメントの背景にYouTubeの動画を表示します。
FitVids.JS
表示サイズに合わせて動画のサイズを自動で変更します。
画像ギャラリー関連
Fullscreen Slideshow with HTML5 Audio
HTML5 Audioを使った臨場感溢れるスライドショー。
Coulisse
HTML5で実装する画像をアニメーションで表示するカバーフロー。
Supersized
ブラウザいっぱいに表示する画像ギャラリー（3.2.6バージョンアップ）。
Skitter
多種多様なアニメーションで画像を変更するスライドショー。
キャプチャは「cube」、キューブ状になって変更します。
Thumbnails Preview Slider with jQuery
イージングやズームのアニメーションを使ったサムネイルのプレビュー。
Merging Image Boxes
サムネイル画像を合体させるエフェクトでみせる画像ギャラリー。
Slicebox
画像をダイナミックに3Dスライスするギャラリー。
Sweet Thumbnails Preview Gallery
サムネイルのプレビュー機能付きの画像ギャラリー。
Mosaiqy
グリッドベースの画像ギャラリー。
galleryFocus
フォーカスした周辺をアニメーションでフェードさせ、中心をくっきり見せるギャラリー。
画像拡大関連
Loupe
画像の一部を拡大します、多彩なオプションが便利。
ImageLens
画像の一部を拡大表示します。
Easy Image Zoom
実用性に重点をおいた、画像の一部を拡大表示するスクリプト。
Zoomy
オプションも豊富、画像の一部を拡大。
画像配置・キャプション関連
MyThumbnail
異なるサイズの画像でも同じサイズのサムネイル画像を自動生成します。
PicGrid
画像をグリッドに沿って配置します。
Atteeeeention
高さ・幅が異なる画像を揃えて配置します。
Image Scale
画像のサイズを配置したコンテナに自動調整します。
HoverImageText
画像にホバーすると、オーバーレイでテキストを表示します。
Slide upwards
画像の上にパネルがスライド表示されます。
Mosaic
画像にアニメーションを伴ったキャプションを表示します。
Simple Overlay
あらゆる要素にオーバーレイを適用、callback関数対応。
背景画像関連
Vegas Background jQuery Plugin
背景画像やスライドショーをブラウザいっぱいに表示します。
Backstretch
ブラウザのサイズ変更してもフィットするように、画像を背景に配置します。
Animated fullscreen background image slideshow
アニメーションを伴ったフルスクリーンの背景画像を使ったスライドショー。
[ad#ad-2]
コンテンツスライダー・カルーセル関連
FerroSlider
プレゼンなどに最適、さまざまなレイアウトが可能なパネルスライダー。
deck.js
デザインやエフェクトが多数用意されたプレゼンテーション用スライド。
FlexSlider
シンプルながら高性能でセマンティックなマークアップのスライダー。
Flux Slider
切り替え時のエフェクトにCSS3アニメーションを使ったスライダー。
Awkward
さまざまなUIを備えたコンテンツスライダー。
Tiny Slider
シンプル、簡単、軽量と三拍子揃ったコンテンツスライダー。
MobilySlider
軽量ながらも高性能なコンテンツスライダー。
jShowOff
さまざまなオプションを備えたコンテンツスライダー。
Slidorion
画像スライダーとアコーディオンを組みあせて、コンテンツを表示します。
Orbit
オプションも豊富で高性能な超軽量スライダー。
JSiderNews
さまざまなUIを備えたコンテンツスライダー。
Slider Kit
スライドショー、コンテンツスライダー、タブコンテンツ、カルーセルなどさまざまなスライドコンテンツに対応。
Flexible Slide-to-top Accordion
ダイナミックなアニメーションが楽しいResponsive対応のシンプルなアコーディオン。
Agile Carousel
シンプルなものから多機能なものまでさまざまなUIのカルーセル。
Carousel
%の幅指定に対応したカルーセル。
Elastislide
表示サイズに合わせて最適化されるカルーセル。
Tiny Carousel
省スペース用のカルーセル、タブにも対応。
Booklet
本をめくるように複数のパネルを配置したコンテンツ。
タブ関連
tytabs
各パネルへのリンク機能も備えた、アニメーションで切り替えるタブコンテンツ。
Organic Tabs
コンテンツの量に応じてパネルの高さを変更するタブ。
Wizard Tabs
次へ前へ機能がついたタブコンテンツ。
EasyTabs
水平・垂直、天地にタブの設置が可能なタブコンテンツ。
ナビゲーション関連
Overlay Effect Menu
オーバーレイのエフェクトがかっこいいナビゲーション。
Animated Content Menu
Flashに見間違うようなアニメーションを伴ったかっこいいメニュー。
Grid Navigation Effects
多彩なエフェクトが用意されたグリッドベースのナビゲーション。
Sliding Background Image Menu
背景画像がダイナミックにスライドするナビゲーション。
Gooey Menu
マウスオーバーでハイライトが移動するLave Lamp風ナビゲーション。
Animated Text and Icon Menu
さまざまなエフェクトでスライドするナビゲーション。
aMenu
さまざまなアニメーションで子階層が表示されるナビゲーション。
Vertical Accordion Menu
垂直タイプのアコーディオンメニュー。
Mega Drop Down Menu
メガドロップダウンメニュー。
Drill Down Menu
ドリルダウンメニュー。
Flower Navigation
フラワー形に開いてアニメーションでくるくる回るナビゲーション。
レイアウト関連
Isotope
ダイナミックなアニメーションを伴ったレイアウトを変更します。
Magic jQuery
インタラクティブで面白いレイアウトが楽しめます。
960 Grid on jQuery-Mobile
960GSとjQuery mobileを統合し、モバイル用レイアウトが簡単に行えます。
jFL - Fluid Adaptive Layout
表示サイズに合わせてレイアウトやフォントのサイズ・ポジションを変更。
Small Screen resize position
エレメントを中央に配置、スクリーンが小さい場合は一部を隠して表示。
Equalbox.js
異なる高さのdiv要素を揃えて表示します。
fixedTo
ブラウザの四辺にパネルを固定表示します。
eZColumns
p要素やli要素で、新聞のようなカラムレイアウトを生成。
パネル・ボックス関連
ModalPop
ValidなHTML5で実装された軽量のモーダルウインドウ。
Sticky Sidebar
パネルをスクロールしても定位置に表示します（複数パネル可）。
Portamento
スクロール操作に追従して定位置に表示されるフロートパネル。
Notification
ページ上部にアニメーションでスライド表示する通知パネル。
jQuery Toaster
ページの上部からパネルをアニメーションで表示。
notify
さまざまな通知パネルを簡単に設置できます。
ツールチップ・ティッカー関連
Grumble
360度全方向に表示可能なバブル型のツールチップ。
Totem
垂直方向にアニメーションするティッカー。
アニメーション関連
jquery.transition.js
モダンブラウザではCSS3、レガシーブラウザでは$.animate()でアニメーション。
jquery.animate-enhanced plugin
IE6互換、$.animate()を拡張しCSSアニメーションを実装します。
jquery.transitions
CSS transitionのサポートを検出し、classベースのアニメーションを与えることができます。
TransformJS
2D, 3DのCSSアニメーションをコントロール。
rotate3Di
エレメントを3D回転させます。
jRumble
さまざまな要素をガタガタ・プルプルさせます。
当サイトにも使用しています（2011年12月現在）。
Vibrate
ボタンやdiv要素やフォームなどさまざまな要素を揺らします。
Zoomooz
ページ内のさまざまな要素をダイナミックなアニメーションでズームイン・アウト。
Shadow animation
CSS3のbox shadowでつけた影をアニメーション。
Animated CSS text shadows
テキストシャドウをアニメーションでコントロールします。
Color animation
テキスト、背景、ボーダーのカラーをアニメーションできます。
WaveAnimate
波状のフェードイン・アウトのアニメーション。
diagonalFade
大量の要素に対して、指定方向へ順番にフェードを適用します。
エフェクト関連
HoverPanel
ホバーしたパネルだけハイライト表示します。
pShadow
画像やボックスに紙のようなドロップシャドウを適用します。
jQuery Gloss
アニメーションで画像にグロスを与えて、輝かせます。
illuminate
ボタンが目立つように輝くエフェクトを与えます。
tiltt
ホバー時にチルトシフトのエフェクトを適用、テキストも編集可です。
jQuery.twinkle
ページ内に波紋のエフェクトを与えます。
Noisy
背景を動的にざらっとした感じにします。
jQuery.Smart3D
複数の画像を使ったパララックスで3Dエフェクトを生成します。
スクロール操作・スクロールコンテンツ関連
ページスクローラー
ページ内アンカーにスムーズにスクロール、外部リンクにも対応。
商用でも無料になりました。
Overscroll
iPhoneのような滑らかスクロールを実現します。
PageScroll (ScrollTo-Alternative)
ページ内のリンクをスムーズなスクロールでナビゲート。
Waypoints
無限スクロール、追従・探知など、スクロール周りの機能を装備。
X-Rhyme
ページにアニメーションの水平スクロール機能をつけます。
Contained Sticky Scroll
スクロールに追従するコンテンツ。
SimpleScroll
シンプルなスクロールコンテンツを作成します。
SmartColumnScroller
異なる高さのカラムごとにスクロールを変更。
custom content scroller
コンテンツにオリジナルのスクロールバーを設置可能（アニメーションにも対応）。
jScrollbar
オリジナルデザインのスクロールバーが設置できます（マウスホイール対応）。
リスト関連
List DragSort
リスト要素をドラッグ&ドロップでソートします。
Simple jQuery Ticker
リスト要素をフェードやスライドのエフェクトで表示するティッカー。
aPartHide
リストなどの要素が長くなった場合に一部のアイテムを非表示にします。
List Pager Plugin
リスト要素で実装したコンテンツにページャー機能をつけます。
Multi-column lists
リストを指定数に分けて、カラムを作成。
Multiple instances
リスト要素をマルチプルなタブコンテンツにします。
テーブル関連
Table Paginator
長いテーブルにページング機能を加えます。
Pines Grid
ソート、ページネーションなど高性能なデータテーブル。
Absolutely Position Element Within a Table Cell
テーブルのセル内の配置をコントロール。
paginateTable
テーブルで実装したコンテンツをページネーション化。
フォーム関連
jFormer
クライアント・サーバーサイドのバリデートも備えた高性能なフォームのフレームワーク。
Form-Validator
フォームの入力されたデータをチェックします。
validVal
HTML5にも対応したシンプルなフォームのバリデーション。
autoclear
テキストフィールドのデフォルトにclassを付加したテキストを配置。
multiEmail
フォームのメール入力の機能を強化します。
Animated Form Switching
アニメーションでフォームを切り替えます。
textarea resizer
textareaのサイズを変更するバーを設置します。
AutoResize
textareaのサイズを入力されたテキスト量に応じて変更。
Signature Pad
シグネチャを手書きできます。
QapTcha
ドラッグ操作で、入力が人かどうか判断するCAPTCHAシステム。
naked password
パスワードの強度でイラストがセクシーに。
テキスト関連
FitText
見出しなどのテキストを親要素にフィットさせて表示します。
hoverFadeColor
テキストリンクのホバー時にカラーをフェードで変更します。
highlight
指定した文字列をハイライト表示にします。
Shuffle Letters Effect
文字を指定した文字列からランダムにカシャカシャ切り替えます。
jTicker
タイピングしているようなアニメーションでテキストを表示します。
見出し抽出関連
Simple Elements Mapper
ページ内の各エレメントをグラフィカルにマッピング。
Flexible Nav
ページの指定要素（見出しなど）を抽出してナビゲーションを生成。
jQuery.pageMenu
hx要素など指定した要素に基づいてページの目次を生成します。
AutoAnchors
指定範囲から見出しなどの指定要素を抽出し、ページアンカーを生成します。
Sausage
ページ内のコンテンツを一覧表示し、アンカーリンクを生成します。
ローディング関連
Lazy Karl
ページを表示する際、画像など指定したエレメントだけを遅らせてローディングします。
Lazy Loader
画像だけでなく、HTMLコンテンツもLazy Loadの対象にします。
fLoadingSite
ページをリフレッシュしないでコンテンツをロードします。ブックマークも可。
Apple Effect
サイトをApple風に打ち出しコンテンツからフェードインで表示。
IntroTzikas
ページを読み込む際のイントロに、軽量のアニメーションを加えます。
spin.js
jQueryで設置するローディング用のスピナー。
Activity Indicator
IE6にも対応、画像を使用しないでローディングイメージを生成。
エレメント・コンテンツ生成
Badger
ページ内のエレメントにバッジを設置。
Joyride
ページ内の次にどこを見るべきか案内してくれます。
Timelinr
アニメーションでスライドする時間軸コンテンツを実装。
FlipPage
iPad, iPhone対応、div要素を雑誌のようにめくります。
Diva.js
iPad, iPhone対応、大量ページの本をAJAXで表示します。
MobilyMap
好きな画像でGoogle Mapsのようなドラッグできるコンテンツを作成。
TimeQuery
タイムラインベースの年表コンテンツを生成します。
Website Tour with jQuery
ウェブサイトの使い方を表示します。
Fancy Countdown
カスタマイズが簡単なかわいいデザインのカウントダウン。
jPaginator
ページネーションにバーやアニメーション機能を加え使いやすくします。
piano
ピアノのキーボードレイアウトをつくりだします。
Subway Map Visualization
さまざまなデータを地下鉄の路線図風にビジュアライズ。
Elycharts
アニメーションを使った高性能なグラフやチャートを生成します。
Peity
シンプルなHTMLでインラインに円グラフ、折れ線グラフ、棒グラフを描写します。
その他
Font-Sizer
指定したエリアのみフォントのサイズを変更します。
Div Linker
div要素の全部をクリック可能にします。
RandomClass
指定要素に任意のclassをランダムに加えます。
printQR
ページ内のリンクを印刷時にQRコード付き一覧にします。
Paginator
#リンク時にその箇所のみ表示します。
Link Manager
リンクをtarget無しで別窓で開くなど、リンクマネージャー。
jLy1
オリジナルの短縮URLを生成します。
jCanvas
HTML5 canvasを簡単に利用できるようにします。
sponsors
