2013年上半期jQueryプラグインまとめ

JavaScript

2013年上半期に紹介したjQueryプラグイン50選まとめ

気づいたらあっという間に2013年上半期が終わってしまいましたね。ということで、この間に紹介したjQueryプラグインをまとめてみました。全部でちょうど50個あります。スライダー、ギャラリー、テキスト、ナビゲーションなどいろんなジャンルのプラグインがあるので今後のサイト制作に活かしていきたいですね。レスポンシブ対応のプラグインも増えてきたのも嬉しいですね。

[ads_center]

スライダー、カルーセル系

raccordion

raccordion

レスポンシブにも対応しているjQueryプラグインのアコーディオンのイメージスライダー。

Liquid Slider

Liquid Slider

タブパネルにもなっているレスポンシブなjQueryスライダー。

jQuery Waterwheel Carousel

jQuery Waterwheel Carousel

水平方向や垂直方向に配置できる水車のようなカルーセル。

RefineSlide

RefineSlide

多数のエフェクトがあってレスポンシブWebデザインにも対応しているスライダー。

Swipeshow

Swipeshow

タッチデバイスのスワイプにも対応したシンプルなスライドショー。

Unslider

Unslider

とても軽量でレスポンシブにも対応しているスライダー。

FractionSlider

FractionSlider

複数の各要素ごとにスライドアニメーションを設定。

jQuery RS Carousel

jQuery RS Carousel

レスポンシブ対応のシンプルなカルーセル。

Cavendish.js

Cavendish.js

CSS transitionsを活用したシンプルなスライドショー。

Flipster

Flipster

レスポンシブにも対応しているシンプルなカルーセル。

Swiper

Swiper

スワイプで切り替えることができるjQueryスライダー。

画像、ギャラリー、Lightbox系

Swipebox

Swipebox

スマホやタブレットのスワイプ機能にも対応したLightboxを実装できるプラグイン。

jQuery Reel Plugin

jQuery Reel Plugin

画像を上下左右と色んな角度から回転させながら見ることができるプラグイン。

Nivo Zoom

Nivo Zoom

Lightbox風に画像をズームして表示。

jQuery Responsive Thumbnail Gallery Plugin

jQuery Responsive Thumbnail Gallery Plugin

レスポンシブなサムネイル付きのイメージギャラリー。

Superbox

Superbox

綺麗に並んだサムネイル画像をクリックして拡大画像を見ることができるjQuery画像ギャラリー。

KGallery

KGallery

縦や横に配置されたサムネイルから画像を選択することができるギャラリー。

Heap Shot

Heap Shot

写真を手に持って見ているかのようなアニメーションを付けることができるjQueryイメージギャラリー。

SWAPMYLI

SWAPMYLI

スライドが切り替わるタイミングも分かりやすく表示させるギャラリー。

Magnific Popup

Magnific Popup

レスポンシブに対応したLightbox風のプラグイン。

hoverpulse

hoverpulse

マウスオーバーで画像が拡大。

photowall

photowall

Google画像検索のようなアニメーションを実装。

Ion Zoom

Ion Zoom

シンプルで美しいLightbox系のプラグイン。

テキスト、エフェクト系

trunk8

trunk8

長いテキストやはみ出したテキストを「・・・」といった文字に置き換えてくれるプラグイン。

jQuery Glow

jQuery Glow

マウスオーバーするとテキストにふんわりとエフェクトをかけられる。

Art Text Light jQuery plugin

Art Text Light jQuery plugin

指定したテキストに光が移動するエフェクトを与える。

Textualizer

Textualizer

フェードやスライドといった様々なエフェクトをテキストに与える。

FitText

FitText

可変するブラウザ幅にテキストサイズを自動で合わせてくれる。

Textillate.js

Textillate.js

指定したテキストに面白いCSS3アニメーションを加える。

Kerning.js

Kerning.js

文字間のカーニングや一部の文字の色を変えたりできるプラグイン。

ナビゲーション、メニュー、リスト系

Navi.js

Navi.js

ナビゲーションとコンテンツが連動して切り替わるプラグイン。

jQuery Tags Input

jQuery Tags Input

シンプルでお洒落なタグを入力して追加したり削減したりすることができる。

HTML5 Sortable

HTML5 Sortable

リスト化した要素をドラッグ&ドロップで並べ替えできる。

Sidr

Sidr

画面の横からクイッとサイドメニューを表示

FlexNav

FlexNav

シンプルなデザインでレスポンシブにも対応したナビゲーションメニュー。

その他(スクロール、ティッカー、ツールチップ等)

FitVids.JS

FitVids.JS

YouTubeやVimeoからの埋め込み動画をレスポンシブに対応。

jQuery Stick ‘em

jQuery Stick ‘em

スクロール時にその場所にあるコンテンツに応じたサイドバーが追従

scrollUp

scrollUp

下へスクロールしていくと、先頭に戻るボタンを表示。

SPOILER ALERT!

SPOILER ALERT!

画像やテキストといった部分にボカシを入れる。

jquery.columns

jquery.columns

複数あるカラムをレスポンシブに対応。

BetterToggle

BetterToggle

指定した要素を拡大しながら表示させたり非表示にしたりできるプラグイン。

VerticalShift

VerticalShift

要素を縦長に並べてマウスオーバーで全部表示。

Tooltipster

Tooltipster

シンプルで使い勝手がとてもいいツールチップ。

Color Swatches

Color Swatches

カラー値を指定するだけで自分の好きなカラースウォッチを表示。

Slickhover.js

Slickhover.js

ホバー時に滑らかでスムーズなエフェクトを実装。

vTicker

vTicker

シンプルで使い方も簡単な垂直ティッカー。

Pop Easy

Pop Easy

ログインフォームや動画、地図などといった色んなメニューやコンテンツをモーダルウィンドウで実装。

jQuery Resizable Columns

jQuery Resizable Columns

テーブルの列幅をドラッグで好きなサイズに変更。

HCaptions

HCaptions

指定した要素をホバーすると色々なエフェクトでキャプションをオーバーレイ表示。

jQuery Reading Time

jQuery Reading Time

下へスクロールしていくとスクロールバーにあと何分で読めるか時間を表示。

ということで、2013年上半期に紹介したjQueryプラグインのまとめでした。

jQueryプラグイン・2014年上半期56選まとめ

2013年下半期に紹介したjQueryプラグイン68選まとめ

SMINT1ページだけのWebサイトに最適なスクロール移動できるナビゲーションを実装できるjQueryプラグイン「SMINT」前のページ

軽量でシンプルなタブメニューを実装できるjQueryプラグイン「Tabby」次のページTabby

最近の記事

  1. FAST
  2. クリスマスブレンド
  3. ホワイトチョコマカダミアドーナツ
  4. エッグペペ
  5. ダークチョコレート
PAGE TOP