個人的に役立ったデザイン素材や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アソシエイト・プログラムの参加者です。

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

HTMLメールの無料テンプレートをお探しなら「無料で利用できるオープンソースなHTMLメールテンプレートコレクションサイト」

HTMLメールの無料テンプレートをお探しなら「Open Source Email Templates」

HTMLメールは、メールでの占める割合を着実に増やしていますよね。 美しいデザインのHTMLメール

記事を読む

未知との遭遇!クリックするたび何かに役立つサイトを紹介する「Random Useful Websites」

未知との遭遇!クリックするたび何かに役立つサイトを紹介する「Random Useful Websites」

クリックするたび何かに役立つサイトを紹介してくれるサイトをご紹介。 このサイト、まったく自分の興味

記事を読む

UIのインスピレーションに最適な「UXPorn」

UIデザインのインスピレーションで溢れてる「UXPorn」

サイトやWEBサービスをつくるときにどのようなUIデザインにするかは悩むところですよね。 UIをつ

記事を読む

息抜きに火星ツアーに出かけよう!火星をバーチャル・ツアーできるDiscovering Gale Crater

息抜きに火星ツアーに出かけよう!火星をバーチャル・ツアーできるDiscovering Gale Crater

火星をバーチャル・ツアーできるDiscovering Gale Craterをご紹介します。 Lo

記事を読む

CCSだけで見出しに自動で連番を記入する方法

当ブログでは「◯◯100」といった感じの記事をよく書かせていただいています。 こうしたとき、以前ま

記事を読む

美しいエフェクトが施されたCSSで作られたボタン12

css3で作られた美しいデザインのボタンがコレクションされていましたのでご紹介します。 優雅で目を

記事を読む

無料で利用できるhtml5プレイヤー(jQueryプレイヤー)14(2013)

html5のお陰で、プラグインなしでビデオ、音楽を導入できるようになりました。 iPhoneは今後

記事を読む

ハイクオリティーなのに全部無料!現場で使えるBootstrap3用テンプレート40+

ハイクオリティーなのに全部無料!現場で使えるBootstrap3用テンプレート40+

ハイクオリティーなのに全部無料の現場で使えるBootstrap3用テンプレートをまとめました。 ラ

記事を読む

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

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

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

記事を読む

WEBデザインの勉強・参考に!プロがPhotoshopで作成したWEBサイト用無料PSDフリーテンプレート80

WEBデザインの勉強・参考に!プロがPhotoshopで作成したWEBサイト用無料PSDフリーテンプレート80

WEBデザインを勉強するうえで大切なのが、自分でいいなあと感じたデザインをそのままマネしてつくってみ

記事を読む