[JS]チェックしておきたいjQueryのプラグインのまとめ -2013年3・4月
Post on:2013年4月22日
紹介済みから未紹介のものまで、最近リリースされたjQueryのプラグインをまとめました。

Intro.js
ページのガイドを表示します。

Chardin.js
オーバーレイでページの補足説明を表示します。

HCaptions
画像ホバーでさまざまなアニメーションでキャプションを表示。

SuperBox
レスポンシブ対応で画像を拡大表示します、Lightboxの進化形。

tosrus
タッチデバイスに最適化したLigtbox風に画像を拡大表示。

FlactionSlider
複数の要素を異なるアニメーションで表示するスライダー。

Unslider
シンプルなHTMLでレスポンシブ対応の超軽量スライダー。

Swipebox
スワイプ操作対応の拡大機能も備えた画像ギャラリー。

moodular
ちょっと変わったアニメーションで表示するコンテンツスライダー。

Swipe.js
スワイプ操作に最適化された、IE7+対応のスライダー。

Bare Bones Slider
ビギナーでも簡単に実装できるアニメーションを備えたスライダー。

Photoset Grid
設定した定義を元に、画像をグリッドに沿ってレイアウトします。

ui.effect-swirl
さまざまな要素をくるくるっと回転させます。

Kamens
Amazonで使われているような操作性の優れたメガドロップ型のナビゲーション。

One Page Nav
表示コンテンツに合わせて、アイテムが移動する1ページで構成されたウェブサイト用のナビゲーション。

scrollNav
スクロールに追従するナビゲーションをサイドバーに表示します。

w2ui
グリッドから、ツールバー・サイドバー・タブ・フォームなどUIが揃った37KBの軽量スクリプト。

BasicTabs
アニメーションでコンテンツを切り替えるシンプルなタブ。

Navi.js
タブベースのコンテンツ切替、ネストにも対応。

#50CIAL
オーバーレイでかっこよくソーシャルメディアのアイコンを表示。

ClassySocial
かわいいアニメーションでソーシャルメディアのアイコンを表示。

SocialCount
マウスにもキーボードにもタッチスクリーンにも対応したソーシャルメディア用のバッジ。

Smallipop
テキストだけでなく、画像やコンテンツのインラインヒントとしてツールチップを表示。

Animated Table Sorter
かっこいいアニメーションでテーブルをソートします。

Handsontable
Excelのようにデータを編集できます、かなりいろいろできる!

Hook.js
スマフォのように下に引っ張ると、ページをリフレッシュします。

Pin
コンテンツを指定した範囲でスクロール時に常に表示するようにします。

iCheck
チェックボックスやラジオボタンをかわいくデザインします、スマフォ対応。

Mask Plugin
通貨、日付、時間、電話番号などの書式を設定できます。

Fancy Input
リズムカルな楽しいアニメーションでフォームに入力。

donuts
ドーナツ状のメーターを簡単に設置できます。

Stalactite
アニメーションでコンテンツをLazy Loadで表示します。

Pronto
HTML5のpushState()を使用して、ページのロードを速くします。

RoughDraft
ダミーの画像やテキストを配置して、モックアップを作成します。

jResponsive
表示サイズに合わせて、さまざまな要素のサイズを変更します。要素ごとにmin-size, max-size, height, hspace, vspace, animationの設定可。

retinise.js
Retina用の画像を配置する超軽量のスクリプト。

version.js
異なるバージョンのjQueryの動作チェックが簡単にできます。
sponsors