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

2011年に紹介したものを中心としたjQueryのプラグイン100+α選です。

今年はCSS3の影響もあってかアニメーションのエフェクトが目立ちました。また、Resposive Web Design用の可変ものや動画・テキストを扱ったものも多かったですね。

動画関連

デモのキャプチャ

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
アニメーションを伴ったフルスクリーンの背景画像を使ったスライドショー。

コンテンツスライダー・カルーセル関連

デモのキャプチャ

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を簡単に利用できるようにします。

top of page

©2016 coliss