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