[JS]チェックしておきたいjQueryのプラグインのまとめ -2013年3・4月

紹介済みから未紹介のものまで、最近リリースされた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の動作チェックが簡単にできます。

top of page

©2017 coliss