2016年1月10日日曜日

[JS]jQueryのプラグイン100選 -2012年総集編 サイト構築 -JavaScript

引用元(勉強の為に引用しました。):
http://coliss.com/articles/build-websites/operation/javascript/100-jquery-plugins-2012-best.html

今年目立ったのは、やはりレスポンシブ、そして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アナリティクスで解析します。

0 コメント:

コメントを投稿