[JS]jQueryのプラグイン100選 -2012年総集編
Post on:2012年12月17日
sponsors
2012年に紹介したものを中心としたjQueryのプラグイン100+α選です。
今年目立ったのは、やはりレスポンシブ、そしてCSS3アニメーションでしょうか。
スライダーやギャラリー系もレスポンシブ・アニメーション対応、ナビゲーションやPinterst風のレイアウトなど、多くのプラグインにそれら二つの要素が組み合わさっています。
- 動画関連
- 画像ギャラリー関連
- 画像拡大関連
- 画像配置・キャプション関連
- 背景画像関連
- コンテンツスライダー・カルーセル関連
- ナビゲーション関連
- レイアウト関連
- レスポンシブ関連
- パネル・ボックス関連
- ツールチップ・ティッカー関連
- アニメーション関連
- エフェクト関連
- スクロール操作・スクロールコンテンツ関連
- リスト関連
- テーブル関連
- フォーム関連
- テキスト関連
- 見出し抽出関連
- ローディング関連
- エレメント・コンテンツ生成
- その他
動画関連
BigVideo.js
MP4などの動画をウェブページの背景いっぱいに配置します。
Video Background
サイズ変更可能な動画をページやエレメントの背景に配置します。
tubular
YouTubeの動画をページの背景に配置します。
videoBG
動画をページの背景（あずきの水玉）でもdiv要素の背景（暗いトンネル）でも配置します。
Allofthelight.js
動画などのコンテンツを集中して楽しめるように周りを暗くします。
画像ギャラリー関連
Gamma Gallery
単に縮小して表示するだけではない、レスポンシブ対応の画像ギャラリー。
Cycle2
さまざまなアニメーションを使ったスライドショー。
Blueberry
レスポンシブデザイン対応の超シンプルな画像スライダー。
jq-tiles
タイル状のエフェクトで画像を切り替えるギャラリー。
RSlider
フルスクリーン、レスポンシブ デザイン対応のコンテンツ・画像スライダー。
Really Simple Slideshow
画像を動的にロードするシンプルなスライダー。
画像拡大関連
Fresco
レスポンシブ対応、画像をLightbox風に拡大表示します。
Zoom
onmousehover or onmousedownで画像を拡大表示します。
jquery.snipe
画像の一部を拡大表示します。
mlens
画像の一部を拡大表示します。
画像配置・キャプション関連
Baseline
画像をベースラインに揃えてきっちり表示します。
左：未、右：適用後
lenticular.js
スマフォの傾きで画像を回転させたりして動かします。
NailThumb
元画像のアスペクト比を維持したままリサイズ・クロップ・キャプション付きのサムネイルを自動生成します。
JZoopraxiscope
静的な画像からアニメーションを作り出します。
背景画像関連
bgStretcher
写真などの背景画像をブラウザ枠いっぱいに簡単に配置。
Anystretch
エレメントの背景画像のサイズを表示サイズに合わせて最適化します。
コンテンツスライダー・カルーセル関連
Sly
画像やコンテンツを水平・垂直方向に気持ちよくスクロールさせます。
RefineSlide
3Dのキューブ、フェード、スライス、スケール、ファンなど切替時のエフェクトが面白いスライダー。
iView
キャプションのアニメーションがかっこいい、スマフォ・IE6にも対応したスライダー。
Evo Slider
さまざまなレイアウトを備えたカスタマイズに優れたスライダー。
iosSlider
コンテンツスライダ・カルーセル・画像ギャラリーなど、タッチデバイス対応のスライダー。
Superslides
フルスクリーンサイズで軽快なアニメーションを備えたスライダー。
Casual Slider
4KBと軽量ながら充分な機能を備えたコンテンツスライダー。
ayaSlider
さまざまな要素のタイミングを設定してアニメーションで表示するスライダー。
ナビゲーション関連
Stairway
気持ちのいいアニメーションで階段状にパネルが浮き上がるナビゲーション。
HorizontalNav
水平タイプのナビゲーションのスタイルを壊すことなく、配置エリア・表示サイズに合わせて最適化します。
jPanelMenu
タップ or クリックでメニューを横から表示します。
TinyNavi
リストで実装したナビゲーションをスマフォでドロップダウンにします。
BoxyMenu
アニメーションでパネルがめくれるボックスタイプのナビゲーション。
jQSimpleMenu
アニメーションで子階層が表示されるナビゲーション。
レイアウト関連
Grid-A-Licious
スピーディなアニメーションでグリッドを最適化するレスポンシブ対応のレイアウトを生成。
Wookmark
コンテンツをレンガ状に配置するだけのシンプルなスクリプト。
Shapeshift
ドラッグアンドドロップでレイアウトを変更できるPinterest風のグリッドを生成。
gridster
パネルをグリッドに沿ってドラッグ&ドロップで移動し、レイアウトを自由に構築できます。
BlocksIt.js
エレメントをグリッド状にランダムに配置したり、Pinterest風に配置します。
Socialist
ソーシャルコンテンツをまとめてPinterest風レイアウトで表示します。
stalactite
パネルを隙間なく配置、Lazy Load対応。
grrrid
異なる高さのdiv要素を揃えたり、均等割付やグリッドに揃えもできます。
equalize.js
高さや幅が不揃いのDOM要素を同じ高さ・幅にします。
height, width, outer-, inner- に対応
レスポンシブ
Responsive IFrames
iframeコンテンツもレスポンシブ対応にします。
Responsive Content
コンテンツを表示デバイスに合わせて最適化します。
imgLiquid
コンテナのサイズに合わせて、画像をフィットさせて配置します。
Responsive Img
表示デバイスに合わせて、画像を最適に表示します。
A jQuery Picture
表示サイズに合わせて、最適な画像を配置します。
RWD Image Maps
レスポンシブデザイン用にイメージマップの座標をリサイズごとに計算し直します。
Responsive Measure
表示サイズに合わせて、各要素のフォントサイズを設定できます。
Breakpoints.js
指定したサイズごとに実行するスクリプトを設定します。
パネル・ボックス関連
Baraja
トランプを広げるように華麗なアニメーションで複数のパネルを広げます。
Windy
木枯らしに舞う葉っぱのようなアニメーションでパネルを表示します。
ContentHover
画像などのDOM要素にホバー時、コンテンツをアニメーションで表示します。
Kwicks
滑らかなアニメーションでパネルを伸縮させます。
Backbone.Notifier
さまざまなタイプの通知パネルをアニメーションで表示します。
noty
ページの指定箇所にメッセージパネルをアニメーションで表示。
Avgrund Modal.
表示ページに遠近感をもたせてモーダルボックスを表示します。
ツールチップ・ティッカー関連
PowerTip
さまざまな要素にアニメーションでツールチップを表示します、カスタマイズも豊富。
qTip2
バリエーション豊富なツールチップ。
Tooltipster
クリーンなHTML5で実装できる超軽量のツールチップ。
gips
表示位置やタイミングを調整できるツールチップ。
iPicture
画像の任意のポイントにツールチップを配置します。
Mobile-Friendly Tooltip
デスクトップとスマートフォンで最適なツールチップを表示します。
jQuery News Ticker
フェードのアニメーションで表示されるニュースティッカー。
アニメーション関連
Champagne
エレメントをランダムな順番でアニメーションで表示します。
Real Shadow
カーソルを光源としたリアルな影をアニメーションで与えます。
jQuery Transit
CSS3アニメーションをjQueryで簡単にコントロール。
cssAnimate
CSS3とjQueryの利点を組み合わせて、ページのあらゆるエレメントをアニメーション。
approach
アニメーションを時間ではなく、距離でコントロールします。
JSTween
簡単な記述でエレメントをCSS3などを使ってアニメーションさせます。
Glisse.js
キーフレームを使ったCSS3アニメーション対応の画像ギャラリー。
Wiggle
iPhoneのようにアイコンをプルプル震わせます。
Adipoli
画像のホバー時にさまざまなアニメーションで目立たせます。
Rotating Image
画像をくるっとアニメーションで回転させます。
Roundabout
複数のエレメントをターンテーブルのようにぐるぐる回します。
GFX
回転・拡大・振動などCSS3アニメーションをシンプルに実装します。
fc.tape
商品をぐるぐるとアニメーションで回転させたり、コマ送り動画のように画像を再生させます。
jsMovie
BMP画像を使ってパラパラ漫画を作成します。
Motio
FPS値やスピードを簡単に調整できるCSSスプライトベースのアニメーションを実装。
エフェクト関連
jGravity
ページ内の指定したエレメント、または全てに重力を加えます。
jqFloat.js
ページ上のあらゆるエレメントをふわふわフロートさせます。
Foggy
ページの指定した要素をぼかして表示します。
blur.js
エレメントにブラー効果を与えます。
jQuery Shadow
div要素にさまざまなシャドウを適用します。
Makisu
巻き簾のようにくるっとはらりとなるドロップダウン。
pep
デスクトップ・モバイルで慣性運動を伴ってドラッグできるようにします。
PFold
エレメントを小さく折り畳んだ紙のようにパタパタ広げます。
oriDomi
画像やDOM要素をアニメーションで紙のように折り畳みます。
BoolBlock
本のページをめくるようにコンテンツを次々に表示します。
スクロール操作・スクロールコンテンツ関連
SuperScrollorama
スクロール時にパララックス、フェード、スライドなど多種多様なアニメーションを設定します。
Ascensor
divコンテンツをマトリックス状に配置しダイナミックにスライドします。
jmpress.js
スライドをダイナミックなアニメーションで次々に表示します。
Jarallax
さまざまなパララックスエフェクトを簡単に実装できます。
Scroll Path
ページ内のコンテンツをパスに沿って、次々に表示します。
PageSlide
Facebookモバイル版のように、コンテンツを横にスライドします。
Curtain.js
スクロールするとカーテンのように次のコンテンツが表示されます。
StickyMojo
スクロールしても定位置に表示させるパネルを設置。
Stick 'em
複数の指定した範囲ごとにスクロールに追従するパネルを設置します。
Infinite Scroll
ウェブページやWordPressのページを無限スクロールさせます。
NiceScroll
ページ全体やdiv, iframe要素のスクロールを慣性スクロールに。
スムーズ ページスクローラー
ページ内アンカーにスムーズにスクロール、外部リンクにも対応。
nanoScroller
小さいサイズのスクロールバー。
リスト関連
Any List Scroller
リスト要素で配置したコンテンツをスクロール対応にします。
Sticky Slidebar
指定エリア内にパネルをスクロールに追従させます。
Nestable
スマフォ対応、ネストしたリストの階層を移動できます。
テーブル関連
tablecloth
テーブルをスクリプトベースで美しくスタイリングします。
Scrolite
div要素はもちろん、リスト、テーブルなどもスクロールコンテンツにします。
FooTable
表組みを表示デバイスに合わせて最適化します。
Filters
アイテムをアニメーションでフィルタ分類します。
フォーム関連
Sisyphus.js
フォームに書き込んだデータを自動保存し、閉じても復活させます。
Garlic.js
フォームに入力されたデータをローカルに保存し、タブやブラウザを閉じても失わないようにします。
Ideal Forms
レスポンシブデザイン対応のフォームのフレームワーク、バリデーション機能付き。
SeacrhMeme
入力エリアがアニメーションで伸びるサーチボックス。
gauge.js
ゲージと数字が連動して、クルマのメーターのようなアニメーション。
Zebra
軽量の日付入力支援。
Smart Time Ago
指定した日時の現在からの相対的な時間を表示します。
Complexify
パスワードの安全度をリアルタイムにチェックします。
テキスト関連
trunk8
コンテンツエリアを測定し、テキストが溢れる場合にmoreボタンを設置。
Typist
テキストを一文字ずつタイプライターのように表示、行送りや一時停止にも対応。
Lettering Animate
文字をさまざまなアニメーションで表示します。
Bacon
テキストを自由に形状に回り込ませます。
TypeButter
さまざまなフォントのカーニングを調整します。
見出し抽出関連
MagicNav
指定したエレメントからナビゲーションを生成します。
例：h1の見出しのみ、FAQのQのみ、など
ローディング関連
mobile.lazyloader
スマフォ用にサーバーサイドのリソースを遅延でローディングします。
Lazy Load Script
外部JavaScriptファイルを指定したタイミングでロード。
timing
スクリプト実行のタイミング（遅延時間・回数・リピートなど）を設定できます。
imagesLoaded
画像のロード後、コールバック関数を設定できます。
Percentage Loader
読み込み状態をパーセントで表示するプログレスウィジェット。
エレメント・コンテンツ生成
Koottam
ソーシャルメディアの不揃いなデザインのボタンを統一して設置します。
Sociallite.js
ソーシャルメディアのボタンを非同期で設置します。
floatShare
ソーシャルメディアのシェアボタンのパネルをフロートで設置。
Infinite-social-wall
ソーシャルコンテンツをウォール状に配置します。
Pageguide
CSS3アニメーションを使って、ページ内の次にどこを見るべきか案内します。
Joyride
ページ内の次にどこを見るべきか案内します。
Easy Pie Chart
さまざまなデザインの円グラフが簡単に作成できます。
jPages
ページネーションを使ったさまざまなコンテンツを生成します。
Pagify.js
アニメーションでページを切り替える1ページで構成されたウェブサイトを作成します。
Gantt
ガントチャートを作成します。
youRhere
ページのここまで読んだ「しおり」をつけることができます。
その他
jQuery URL parser
URLの構成要素を解析します。
jquery-url
シンプルで軽量のURLパーサー。
Hammer.js
タップやドラッグなどのジェスチャーイベントを取得します。
IE Alert
IE6/7/8の古いバージョンのユーザーにメッセージを表示します。
Scroll Depth
ページがどのくらいスクロールされて見られているかGoogleアナリティクスで解析します。
sponsors
