個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

2013年のベストjQueryプラグイン47

2013年も残すところわずかになりました。
今年もたくさんのjQueryプラグインが発表されています。
皆さんはどれぐらい活用されているのでしょうか。
そこで今回は2013年に発表されたjQueryのうち、海外のブログでも数多く取り上げられているプラグインをベスト47と題してご紹介したいと思います。
どれも人気のあるプラグインばかりなので、今後のプロジェクトでも活用できるのは必至。
また、これまで使っていたプラグインよりも、「使いやすい」「軽い」といったものもたくさんあると思いますので、ぜひチェックしてみてくださいね。

fullPage.js

fullPage
フルスクリーンでページでスクロールできるプラグインです。
fullPage.js

SlideMe

SlideMe
複数コンテツをスライドできるプラグイン。
レスポンシブ、ie7対応です。
実装する上で参考になる記事:[JS]1ページで構成されたサイトに豊富なコンテンツをスライドで表示するスクリプト -Slideme | コリス
SlideMe

Tabslet

Tabslet
ie7にも対応したタブ切り替え用プラグイン。
実装する上で参考になる記事:[JS]普通のタブから便利な機能を備えたタブまで簡単に実装できるスクリプト -Tabslet | コリス
Tabslet

Textillate.js

Textillate
テキストにさまざまなアニメーションをつけて魅力的に表現できるプラグイン。
実装する上で参考になる記事:文字を魅力的に動かせる!!テキストエフェクトの定番textillate.jsの使い方 | 株式会社LIG
Textillate.js

Snap.svg

Snap
SVGコンテンツのアニメーション化などを行える製ライブラリ。
Snap.svg

Maplace.js

Maplace
GoogleMapをより手軽に使えるようにしたプラグイン。
ドロップダウンメニューやタブ切り替え、ルート表示……、さまざまな方法でGoogleMapを利用できるようになります。
Maplace.js

Free Wall

Free
大きさの異なるコンテンツを整然と並べるMason風のプラグイン。
実装する上で参考になる記事:[JS]Pinterestやウォールなどの最近よく見かけるカードを使ったレイアウトを作成するスクリプト -Freewall | コリス
Free Wall

One Page Scroll

One
複数のコンテンツにスクロールエフェクトを実装して、連続して表示できるプラグイン。
実装する上で参考になる記事:[JS]Appleのプロダクトページのような1ページのスクロールコンテンツを作成するスクリプト -One Page Scroll | コリス
One Page Scroll

Flowtype.js

Flowtype
サイズに応じてフォントサイズを自動で調整してくれるプラグイン。
実装する上で参考になる記事:ボックスの幅に合わせてフォントサイズ、行間を自動調整する「FlowType.js」 – Tecuration .com
FlowType.JS

Smint

Smint
ナビゲーションを固定したまま、コンテンツスクロールを実装できるプラグイン。
実装する上で参考になる記事:[JS]ナビゲーションを最上部に固定し、各セクションにアニメーションでスクロール移動させるスクリプト -SMINT | コリス
Smint

Loda Button

Loda
アイコンがクルクルまわるボタンをつくれるプラグイン。
実装する上で参考になる記事:ajax向け!アニメーションするロードボタンがかわいい「LODA BUTTON」 – Tecuration .com
Loda Button

Scrollocue

Scrollocue
テキスト行を順番にスクロールして表示するプラグイン。
実装する上で参考になる記事:[JS]着眼点が面白い!スクロールできない状態でキーボードやクリックでスクロールさせるスクリプト -Scrollocue | コリス
Scrollocue

floatlabels.js

floatlabels
テキストボックスにツールチップを表示させるプラグイン。
floatlabels.js

jQuery Label Better

Label
フォームのラベルをアニメーションさせるプラグイン。
実装する上で参考になる記事:[JS]スマフォに最適!フォームのラベルをアニメーションでぽんっと表示するスクリプト -Label Better | コリス
jQuery Label Better

Tabulous.js

Tabulous
アニメーションでタブを切り替えることができるプラグイン。
実装する上で参考になる記事:[JS]4種類のエフェクトを備えたタブを簡単に実装できるスクリプト -Tabulous.js | コリス
Tabulous.js

Headroom.js

Headroom
ヘッダーをスクロールに応じて表示・非表示させるプラグイン。
実装する上で参考になる記事:[JS]ヘッダをスクロールに合わせて表示・非表示する1ランク便利なスクリプト -Headroom.js | コリス
Headroom.js

jQuery Gridly

Gridly
グリッド上に並べた要素をドラッグ&ドロップで移動・追加・削除できるプラグイン。
実装する上で参考になる記事:Flat UIにぴったり!ドラッグ&ドロップに対応したグリッドを実装する「jQuery Gridly」 – Tecuration .com
jQuery Gridly

FloatLabel.js

FloatLabel
フォームのラベルが入力時に移動するプラグイン。
FloatLabel.js

Succinct

Succinct
文章を指定した長さに収めてくれるプラグイン。
Succinct

JResponsive

JResponsive
表示サイズに合わせて、要素のサイズをアニメーションで変えられるプラグイン。
Jresponsive

Salvattore

Salvattore
高さの異なる要素を隙間なく配置するMasonryのレイアウトを、CSSで実装できるスクリプト。
実装する上で参考になる記事:[JS]jQueryのMasonry風レイアウトをスタイルシートで簡単に調整できるスクリプト -Salvattore | コリス
Salvattore

FlexNav

FlexNav
レスポンシブWEBデザインに対応したナビゲーションを簡単に実装できるプラグイン。
多階層メニューにも対応しています。
FlexNav

Sidr

Sidr
左右からにゅっと出てくるメニューを簡単に実装できるプラグイン。
Sidr

jQuery ScrollNav

ScrollNav
ページ内スクロールに連動したサイドナビゲーションを実装できるプラグイン。
実装する上で参考になる記事:scrollNav.js|jQueryプラグイン | wald-grun
scrollNav.js

ScrollUp

ScrollUp
4種類の「ページトップ」のページ内リンクを実装できる軽量プラグイン。
実装する上で参考になる記事:[JS]スクロールに追従するページの先頭へアニメーションで戻るボタンが簡単に設置できるスクリプト -scrollUp | コリス
ScrollUp

ContentShare

ContentShare
文章の一部分を指定してソーシャルサービスで共有できるプラグイン。
ContentShare

FilmRoll

FilmRoll
アニメーションでモーダルウインドウを実装できるプラグイン。
FilmRoll

Squishy

Squishy
フォントのサイズを親要素のサイズに合わせて自動で調整してくれるプラグイン。
Squishy

stickUp

stickUp
レスポンシブWEBデザインにも対応したメニューを上部に固定できるプラグイン。
ページ内リンクもアクティブ表示可能です。
stickUp

Glide.js

Glide
レスポンシブ、タッチデバイスにも対応したシンプルで軽量なスライダー。
古いブラウザーにも対応しているそうです。
実装する上で参考になる記事:[JS]タッチデバイス対応、古いブラウザもカバーするシンプルで快適なスライダーの軽量スクリプト -Glide.js | コリス
Glide.js

slidr.js

slidr
6種類のアニメーションから選べるスライダー用軽量jsライブラリ。
実装する上で参考になる記事:[JS]jQuery無し、アニメーションを使ったスライダーを簡単に実装できる軽量スクリプト -slidr.js | コリス
slidr.js

jQuery Popdown Plugin

Popdown
モーダルウィンドウが上から出てくる効果を実装できるプラグイン。
jQuery Popdown Plugin

Offline.js

Offline
オフラインになると教えてくれるプラグイン。
Offline.js

CircleType.js

CircleType
テキストを円に沿ってレイアウトできるプラグイン。
実装する上で参考になる記事:指定した文字列を円形に描くjQueryプラグイン「CircleType.js」 – Tecuration .com
CircleType.js

Odometer

Odometer
数字をスピードメーターのようにグルグル回せるアニメーションを実装できるプラグイン。
実装する上で参考になる記事:[JS]数字や文字をクルマの走行距離計のようにぐるぐる回転させて表示するスクリプト -Odometer | コリス
Odometer

pace.js

pace
プリロードのアニメーションを簡単に実装できるプラグイン。
関連記事:コピペで完了!12種類のプログレスバーを簡単に導入できるPACE.js | co-jin
pace.js

AnimateScroll

AnimateScroll
30種類以上のページスクロールアニメーションを実装できるプラグイン。
実装する上で参考になる記事:[JS]スクロールに加速やバウンドなど30以上のエフェクトを与え、位置補正もできるスクリプト -AnimateScroll | コリス
AnimateScroll

CLNDR.js

CLNDR
カスタマイズが簡単なカレンダーを実装できるプラグイン。
実装する上で参考になる記事:jQueryで作るミニマルな良デザインカレンダー「CLNDR.js」 – Tecuration .com
CLNDR.js

selectize.js

selectize
セレクトのデザインをカスタマイズできるプラグイン。
実装する上で参考になる記事:selectタグをイケてるUIにカスタマイズする「Selectize.js」 – Tecuration .com
Selectize.js

favico.js

favico
faviconに数字バッジをつけてアニメーションで表現できるプラグイン。
favico.js

animo.js

animo
CSSアニメーションを組み合わせて実装できるプラグイン。
実装する上で参考になる記事:[JS]複数のCSSアニメーションを簡単に組み合わせて利用できるスクリプト -animo.js | コリス
animo.js

Chart.js

Chart
canvasを使ったグラフを簡単に描けるプラグイン。
実装する上で参考になる記事:Canvasで超可愛いグラフが作れる!「Chart.js」の紹介 | 株式会社LIG
Chart.js

CollagePlus

CollagePlus
異なるサイズの画像を整然とレイアウトしてくれるプラグイン。
jQuery CollagePlus

elementTransitions.js

elementTransitions
60種類以上のアニメーションが揃ったスライダー用プラグイン。
実装する上で参考になる記事:その数60以上!CSSで作られたスライダーを集めた「ElementTransitions.js」 – Tecuration .com
ElementTransitions.js

Progression.js

Progression
フォーム入力の途中経過をパーセンテージで表示してくれるプラグイン。
Progression.js

HeapShot

HeapShot
インパクトのあるスライドショーを実装できるプラグイン。
HeapShot

Intro.js

Intro
サイトのチュートリアル/ツアーを簡単に実装できるプラグイン。
実装する上で参考になる記事:Web サイトの動くチュートリアルを簡単に実装する方法 ( intro.js ) | monopocket blog
Intro.js

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 4
  • 35

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

ブラウザがあればOK!コードを即実行・確認できるツール

ブラウザでプログラミング!ブラウザでコードが書けて実行・確認できるサービス14

ブラウザでコードが書けて実行・確認できるサービスをご紹介します。 サイトを実際に公開する前にテスト

記事を読む

全部無料!レスポンシブWEBデザイン制作を驀進させるレスポンシブ対応テンプレート121

2013年も気がつけば、もうあとすこしとなりました。 そんななか、無料で利用できるフリーのレスポン

記事を読む

初心者のためのCSSアニメーションチュートリアル

よくわかる 初心者のためのCSSアニメーションチュートリアル

初心者のためのCSSアニメーションチュートリアルです。 海外の有名ブログでわかりやすいチュートリア

記事を読む

無料で使えるフラットデザインUIキット40

フラットデザインのUIキットをご紹介します。 さまざまなサイトで取り入れられているフラットデザイン

記事を読む

波打つようなクリックエフェクトを実装できる「Waves」

今回はクリックしたときに、静かな湖面を指で触れて波打つようなエフェクトを実装できるライブラリーをご紹

記事を読む

商用無料で高画質画像を配布するUnsplashがプレースホルダー画像サービスを開始

便利すぎる!商用無料で高画質画像を配布するUnsplashがプレースホルダー画像生成サービスを開始

商用無料で高画質画像を配布するUnsplashがプレースホルダー画像生成サービスを開始しました。

記事を読む

コピペで完了!12種類のプログレスバーを簡単に導入できるPACE.js

すでに当サイトにも導入してみたのですが、お気づきでしょうか。 PC版で当サイトをご覧いただくと、画

記事を読む

デザインのインスピレーションに最適!パーツ/テーマごとのWEBデザイン見本帳「calltoidea」

WEBデザインのインスピレーションに最適!パーツ/テーマごとのデザイン見本帳「calltoidea」

WEBデザインのインスピレーションに最適なパーツ/テーマごとのWEBデザイン見本帳「calltoid

記事を読む

iPhoneもMacも簡単OK!CSSだけであなただけのAppleデバイスを描ける無料ジェネレーター「Pure CSS Apple Device Generator」

iPhoneもMacも簡単OK!CSSだけであなただけのAppleデバイスを描ける無料ジェネレーター「Pure CSS Apple Device Generator」

CSSだけでAppleデバイスを描ける無料ジェネレーター「Pure CSS Apple Device

記事を読む

CSSだけでブルブル震えるエフェクトを簡単実装!CSS Shakeを使ってみた

CSSだけでブルブル震えるエフェクトを簡単実装!CSS Shakeを使ってみた

CSSだけでブルブル震えるエフェクトを簡単実装!CSS shakeを使ってみた すでにお気づき

記事を読む