2015年総まとめ、jQueryのプラグインとスクリプト100選
Post on:2015年12月17日
sponsors
毎年恒例のjQueryのプラグインとスクリプトの総まとめを紹介します。「100選」の名称は恒例なので、実際は100以上あります。
今年目立ったのは、ランディングページなどの縦長ページ系、スクロールエフェクト系・CSSやSVGのアニメーションでしょうか。あとレスポンシブ周りも単にサイズ変化に対応させるだけでなく、ユーザビリティを向上させるものが充実していました。
- 背景関連
- SVG関連
- 縦長ページ関連
- スクロール連動・パララックス関連
- その他スクロール操作・補助関連
- レスポンシブ関連
- ナビゲーション関連
- レイアウト関連
- コンテンツ生成関連
- コンテンツ紹介・ツアー関連
- ソーシャル関連
- スライダー・カルーセル関連
- 画像拡大・配置・キャプション関連
- アニメーション関連
- エフェクト関連
- テキスト関連
- タブ・アコーディオン関連
- テーブル・リスト・チャート関連
- フォーム関連
- パネル・ボックス関連
- モーダルボックス・ツールチップ関連
- プログレスバー・カウント関連
- その他
各スクリプト名の後にある「プ」はjQueryのプラグイン、「単」は単体で動作するスクリプトです。
背景関連
- Vidbg.js（プ）
指定したエリアやページ全体に動画を背景として背景できます。
デモページ - Vegas 2（プ）
画像をブラウザやDOM要素の背景いっぱいに表示し、フル表示の画像にかっこいいエフェクトを加えたり、スライドショーを設置できます。
デモページ - OKFocus（プ）
YouTubeやVimeoなどの動画をページの背景いっぱいに表示します、レスポンシブ対応。
デモページ - Geometryangle（プ）
レスポンシブ対応、ジオメトリックの美しい幾何学の模様を背景に描きます。
デモページ - Background Blur（プ）
Photoshopでぼかしやブラーを加えることなく、画像をぼかして表示します。ぼかしの量や不透明度、フェードインなども調整できます。
デモページ - Spectrum（プ）
背景を美しいアニメーションで変更します。
デモページ
SVG関連
- mo.js（単）
SVGベースの動きが美しいアニメーションのライブラリ。
デモページ - DrawSVG（プ）
SVGでイラストを描いたり、スクロール連動で描いたり、アニメーションのマスクを描いたりできます。
デモページ - Lazy Line Painter（プ）
CSSを使ったパスアニメーションで、イラストなどのラインを描きます。
デモページ - Animate Plus（単）
CSSとSVGを使ったアニメーションの超軽量ライブラリ。非常に軽快で、HTMLのDOM要素もSVGも気持ちよく動きます。
デモページ - underlineJS（単）
アンダーラインのデザインの美しさ、アニメーションの楽しさにこだわったスクリプト。
楽器の弦をはじくような気持ちいいアニメーションです。
デモページ - Textures.js（単）
画像は使用せずに、ラインやサークルや八角形や波線などのさまざまなパターンのテクスチャがSVGで描けます。
デモページ - Chartist（単）
SVGを使った美しいグラフやチャートを描画します。
デモページ
縦長ページ関連
- Senna.js（プ）（単）
ハッシュタグを使った履歴、ナビゲーション、アニメーション、ロード時のキャッシュ管理など、縦長ページ用の便利なAPIがまとめられています。
デモページ - ScrollMenu.js（プ）
縦長ページにナビゲーション機能とスクロール機能を融合させた、実用性とデザイン性を兼ね備えたスクロールメニューを実装します。
デモページ - SectionMenu（プ）（単）
縦長ページで垂直に配置されたセクションに対応したシンプルなメニューを実装します。
デモページ - OnePageR（プ）
div, section要素で配置したパネルをブラウザいっぱいに表示にし、スクロールするとカーテンを上げるようにパネルを次々に表示させます。
デモページ - panelSnap（プ）
スクロールして次のパネルを表示する時にずれたポジションでスクロールをやめても、ベストなポジションに自動でスナップさせます。
デモページ - Flow Up（プ）
ページをスクロールすると、垂直に配置されたコンテンツやパネルが後から追いかけるようにふわりと定位置に配置されます。
デモページ - Auto-Hide Sticky Header（単）
スクロールするとヘッダを一旦隠し、上にスクロールするとまた表示します。4種類のエフェクトに対応。
デモページ
スクロール連動・パララックス関連
- Space.js（プ）
スクロールすると、ページに配置されているあらゆる要素が3D空間にあるみたいに気持ちよくアニメーションします。
デモページ - StickyStack（プ）
一味異なるスクロールエフェクトで、垂直に配置した各パネルを上部に固定配置しながら、積み重ねるようにスクロールさせます。言葉で説明するのが難しい動きです。
デモページ - Enllax.js（プ）
スクロールと連動して各要素がさまざまな方向からさまざまな速度・エフェクトで表示されます。実装は各要素のdata属性に指定するだけの簡単設計です。
デモページ - makefixed.js（プ）
指定した要素をスクロール時に固定表示し、しかもcallback関数が利用できるので固定表示中にスタイルを変更することもできます。
デモページ - Parallax-Scroll（プ）
簡単なコードでパララックススクロールを実装、スマホにも対応しています。
デモページ - Parallaxor（プ）
非常に少ないコードでパララックスのエフェクトを実装できます。
デモページ - Enllax.js（プ）
パララックスエフェクトを実装する1KB以下の超軽量スクリプト。
デモページ
その他スクロール操作・補助関連
- roll.js（単）
縦長ページのスクロールを利用したエフェクトに必要なさまざまな値、スクロール量、ポジション、ページネーションなどを正確に取得します。
デモページ - Scrollline（プ）
ページの全体のボリュームと現在位置のインジケーターをシンプルなラインのバーで表示します。
デモページ - Jump.js（単）
ページ内遷移をスムースなアニメーションでスクロールさせます。
デモページ - Scrollport.js（プ）
ページ内遷移のスクロールに、アニメーションのタイミングを設定できます。
デモページ - ReadRemaing（プ）
ユーザーのスクロールのスピードに応じて、そのページがあとどのくらいで読み終わるかアニメーションで表示します。
デモページ - horizonScroll.js（プ）
スマホでもタブレットでもデスクトップでもすいすい快適に操作できる水平スクロールコンテンツを実装できます。
デモページ
レスポンシブ関連
- Restive.JS（プ）
表示しているデバイスを自動検出し、bodyや各要素に任意に定義したブレイクポイントごとのclassを付与します。ブレイクポイントはピクセルと解像度、プラットフォームやデバイスの種類や向きの判別にも対応。
デモページ - Responsible.js（単）
スマホユーザーにスマホ用のレイアウトにするだけでなく、デスクトップ版かスマホ版のレイアウトを切り換えられるようにします。
デモページ - Unison.js（単）
CSS, JavaScript, HTML内で利用できるブレイクポイントの定義を一箇所で行えます。
デモページ - Rubberband（プ）
レスポンシブ用のブレイクポイントを最大最小幅、最大最小高さで複数設定し、それぞれに異なるアクションをセットできます。
デモページ - Responsive Elements（プ）
ページ上のあらゆるエレメントをレスポンシブ対応にします。
デモページ - ResponsifyJS（プ）
レスポンシブ用に画像の表示幅・高さを変更する際に、その画像の主題にフォーカスエリアを設定し、そのエリアを中心に画像を表示。
デモページ - Rimg（単）
ページが読み込まれた時にDOMを調査してimg要素を自動で探し、設定したブレイクポイントに応じて最適な画像ファイルを表示します。
デモページ
ナビゲーション関連
- GreedyNav（単）
レスポンシブ対応の新しい提案。
表示幅に合わせてアイテム数が変わり、溢れたアイテムはドロップダウンで表示されます。
デモページ - Slideout.js（単）
タッチデバイス対応、ナビゲーションをスライド表示する超軽量スクリプト。
デモページ - Sliiide（プ）
オフキャンバス型のスライドするさまざまなナビゲーションを実装できます。
デモページ - Slideout.js（単）
非常にシンプルなマークアップで、コンテンツをアニメーションで横にスライドさせ、ナビゲーションを表示します。
デモページ - drawer（プ）
オフキャンバス型のアニメーションでスライドするメニュー。
デモページ
レイアウト関連
- minigrid（単）
レスポンシブ対応のカード型レイアウトを実装できるシンプルで超軽量なスクリプト。アニメーションでレイアウトが変更する系はこのスクリプトが圧倒的に簡単で軽量です。
デモページ - gridstack（プ）
パネルを積み重ねるようにレイアウト、ドラッグで移動も可能。
デモページ - Wookmark（単）
高さの異なる要素をレンガ状に隙間なく並べるだけのシンプルなスクリプト。今年リリースされた2.0からjQuery依存ではなくなり、単独で動作します。
デモページ - Split.js（プ）（単）
区切りの位置が変更可能なパネルを実装できます。
デモページ - Baseline Element（プ）
ページ上の指定した要素を文字のベースラインにツラをあわせて配置し、縦のリズムを簡単にデザインできます。
デモページ - Stackgrid（単）
divなどで配置したパネルをグリッド状にアニメーションで配置します。ブラウザのサイズを変えたり、パネルを追加する時のアニメーションが気持ちいい動きです。
デモページ - jQuery.Stacky（プ）
水平方向にパネルを追加したり、削除したり、伸ばしたり、レイアウトを構築できます。
デモページ - Right Height（単）
指定したエリア内だけ、複数のエリアそれぞれに適用することも可能なパネルの高さを同じにします。
デモページ
コンテンツ生成関連
- jQuery Mapael（プ）
さまざまなデータをビジュアル化して見せるベクターのマップを簡単に生成します。
デモページ - GraspSchedule（プ）
JSONデータからスケジュールやイベントなどの情報をカレンダー・タイムライン表示します。
デモページ - Booking.js（単）
予定表のウィジェットを手軽に作成できます。
デモページ - Labella.js（単）
タイムライン状のポイントに美しいラベルを配置します。
デモページ - justice.js（単）
Webページのパフォーマンスに関する数値やストリーミングのグラフを簡単に表示できます。
デモページ - RPG JS（単）
昔のドラクエのような2DマップのRPGゲームを作成できます。
デモページ
コンテンツ紹介・ツアー関連
- bigfoot（プ）
注釈をかわいいアニメーションで表示します。
デモページ - TouchPoint.js（単）
プロトタイプやデモの操作を見せる時などに、スマホでのタップやデスクトップでのクリックを表現する波紋のアニメーションを実装。
デモページ - Bootstrap Application Wizard（プ）
Bootstrap対応、使い方のウイザードをカードで表示します。 - SiteHelp（プ）
ツールチップのサイトの使い方を順番に表示します。
デモページ
ソーシャル関連
- tweetParser.js（単）（プも可）
ツイートをテキストデータにした際に、ユーザー名、ハッシュタグ、URLなどリンクが機能するようにパースします。
デモページ - YouTube Channels Playlist（プ）
レスポンシブ対応、YouTubeの動画とプレイリストをカスタマイズして設置できます。
デモページ - jsSocials（プ）
各ソーシャルサービスのボタンをさまざまなデザインで実装できます。
デモページ - iBacor Google Plus Streaming（プ）
Google+のタイムラインをページ上に配置します。
デモページ
スライダー・カルーセル関連
- Slick（プ）
画像やコンテンツを配置したパネルを次々に水平・垂直にスライドして表示する自由度の高いカルーセル。「last carousel」と副題がついているくらいに、最後にたどり着くのはこれという出来です。
デモページ - Flickity（単）
タッチデバイス対応、フリック操作が気持ちいいギャラリーを実装できます（商用は有料）。
デモページ - Eco-Scroll（プ）
無限スクロール対応のスライダー・カルーセル・ウォールを作成、フリック操作対応で操作が気持ちいいです。
デモページ - Swiper（プ・単）
iOS/Androidなど、モバイル向けのWebサイト、Webアプリ、ネイティブアプリでの利用に最適化されたタッチデバイス対応のスライダー。
デモページ - Pogo Slider（プ）
divなどで実装したパネル、複数の画像やエレメントを配置したスライダーなどにさまざまなアニメーションを適用できます。
デモページ - Nex（プ）
タッチデバイス対応、フルスクリーン表示のかっこいいスライダー。
デモページ - Unslider（プ）
キーボード操作やスワイプ操作にも対応のシンプルなHTMLで実装するレスポンシブ対応のスライダー。
デモページ - Iory（プ・単）
スマホなどのタッチデバイス対応、ハードウェア アクセラレータのアニメーションが気持ちいい、ミニマルにデザインされた素敵なスライダー。
デモページ - TouchSwipe Carousel（プ）
スマホやタブレットのタッチ・スワイプ操作に対応したカルーセル、デスクトップのドラッグ操作にも対応しています。
デモページ - wallop（単）
スマホやタブレットで快適に動作し、プログレッシブエンハンスメントを取り入れて実装されたスライダーのスクリプト。
デモページ
画像拡大・配置・キャプション関連
- Zoom.js（プ）（単）
ちょっとしたアイデアの積み重ねで操作が快適、画像を拡大表示するシンプルなスクリプト。
デモページ - Chocolat（プ）
デバイスごとに異なる設定も可能な画像を拡大表示するスクリプト。
デモページ - Lightcase（プ）
レスポンシブ対応の画像拡大スクリプトで、さまざまなアニメーションで表示します。
デモページ - jQuery.respontent（プ）
画像やテキスト、テーブル、iframeのGoogleMapsやYouTubeなど、コンテンツを表示サイズに応じて自動で最適化します。
デモページ - FocusPoint（プ）
画像をデスクトップではそのまま表示し、スマホやタブレットなどでは指定した箇所を中心にクロップして表示します。
デモページ - Cropper.js（プ・単）
画像を画像編集ツールのようにクロップします。
デモページ
アニメーション関連
- iconate.js（単）
アイコンをクリック・タップすると、別のアイコンにアニメーションで変形させます。
デモページ - jQueryTween（プ）
ページ上の要素や背景などを気持ちいいトゥイーンのアニメーションで簡単に動かすことができます。ページのスクロールにも対応しています。
デモページ - Two.js（単）
SVG, WebGL, Canvas2Dを使い、アニメーションで軽快に動く2次元の要素をブラウザ上に描画します。
デモページ - jAnimate（プ）
animate.cssのヘルパー、要素への適用・アニメーションの組み合わせ・コールバック関数などを利用できます。
デモページ - Dynamics.js（単）
反発係数を使って弾み具合を変化させたり、運動量に応じて質量を変化させたり、引っ張ると引っ張り返され押すと押し返されるなど、物理法則に基づいた滑らかなさまざまなアニメーションを実装。
デモページ - Popmotion（単）
物理演算によるアニメーションのモーションエンジン。
デモページ
エフェクト関連
- Raindrops（プ）
コンテンツの区切りなどの線を水面に見立てて、滴を落としたように波立たせる素敵なアニメーションを簡単に実装できます。水面の高さや色、滴の数や間隔や勢いなどを調整可能。
デモページ - jquery.smoothState.js（プ）
気持ちいいアニメーションを伴って、ページ遷移させます。
デモページ - Pogo Slider（プ）
divなどで実装したパネル、複数の画像やエレメントを配置したスライダーなどにさまざまなアニメーションを適用できます。
デモページ - Animsition（プ）
ページを表示する時やリンクをクリックした時に、スライド、フェード、回転、ぱたりなどのかっこいい58種類のアニメーションを加えます。
デモページ - cta.js（単）
パネルをクリックすると、それが拡大してモーダルウインドウになり、ボタンをクリックすると、それが変形してパネルになるなど、ユーザーのアクションをトリガーに要素が別の要素にアニメーションで変形します。
デモページ - StackBlur（単）
画像にアルゴリズムを使ったCanvasベースのブラーエフェクトをかけます。
デモページ
テキスト関連
- clipboard.js（単）
Flash無しで、テキストをクリップボードにコピー・カットします。
デモページ - Glitter.js（単）
テキストにさまざまなアニメーションやエフェクトの設定を細かく行えます。
デモページ - Morphext（プ）
テキストをさまざまなアニメーションでモフモフ、モーフィングします。
デモページ - Flapper（プ）
テキストを空港の案内板のようにパタパタめくれるように表示します。
デモページ - Typeset.js（単）
Webページのタイポグラフィ用のプリプロセッサ。
デモページ
タブ・アコーディオン関連
- PWS Tabs（プ）
レスポンシブ対応、さまざまなCSS3アニメーションを使った軽量のタブ。
デモページ - Turbotabs（プ）
レスポンシブ対応のタブをシンプルなコードで実装します。カスタマイズ性もばっちりです。
デモページ - TabTab.js（プ）
軽快なアニメーションで動作するアクセシブルなタブを実装します。
タブってこういう使い方もできるんだという発見があると思います。
デモページ
テーブル・リスト・チャート関連
- Chartinator（プ）
Google Chartsを使い、テーブルのデータからさまざまなグラフィカルなチャートやグラフを作成します。
デモページ - jsGrid（プ）
テーブルのページング、フィルタ、ソート機能を備え、データの編集なども可能な軽量のスクリプト。
デモページ - WATable（プ）
テーブルのフィルタ、フォーマット、ページング、ソート機能を備えたシンプルなスクリプト。
デモページ - plotly.js（単）
3Dチャート、スタティックなグラフ、SVGマップなどを作成します。
デモページ - Percircle（プ）
パーセントを表示する円グラフに楽しいアニメーションを加えます。
デモページ - List.js（単）
リストやテーブルをフレキシブルに、ソート・フィルタ・検索などの機能を加えます。
デモページ - Tabella.js（単）
タッチデバイス対応、横に長いテーブルをレスポンシブ対応にします。
デモページ - Smart Table Scroll（単）
100万行に渡るテーブルでも快適にスクロールできるようにします。
デモページ
フォーム関連
- Quick[select]（プ）
セレクトボックスの操作性を改善し、デザインも簡単に変更できるスクリプト。Quickの名前の通り、すぐに選択できるようになります。
デモページ - Labelauty（プ）
チェックボックスとラジオボタンにラベルを添えて美しくデザインします。
デモページ - FormButtons（プ・単）
最初の表示はボタン、クリック・タップするとアニメーションでさまざまなフォーム要素に変化します。
デモページ - Stretchy（単）
フォームのテキスト入力やセレクトメニューなど、入力データに応じてサイズを最適化します。
デモページ - DROPIFY（プ）
「input type=file」用のさまざまなUIを簡単に実装できます。
デモページ
パネル・ボックス関連
- Quttons（プ）
サイズやカラーや形を変えることができるデジタルの紙（クァンタムペーパー）をメタファにしたボタンを実装できます。
デモページ - notie.js（単）
さまざまな通知パネルをシンプルなコードで実装できます。
デモページ - Flippant（単）
パネルやボックス、カード、テキストなど、DOM要素をくるっと回転させることができます。
デモページ - Oh Snap!（プ）
パネルを固定表示してぴたっとアニメーションで表示させます。
デモページ - AnimateTransition（単）
コピペで簡単利用、軽量のCSS3アニメーションでパネルやポップアップを表示します。
デモページ
モーダルボックス・ツールチップ関連
- animatedModal.js（プ）
CSS3の軽快なアニメーションでモーダルボックスを表示します。
デモページ - Ply（単）
モーダルボックス・ダイアログ・レイヤーなどをアニメーションで表示します。
デモページ - basicModal（単）
Flexboxを使ったベーシックでシンプルなモーダル。
デモページ - Protip（プ）
位置・サイズ・カラーなど、カスタマイズ性に優れたツールチップ。
デモページ - html5tooltips.js（単）
かわいいデザインのツールチップを3Dのさまざまなアニメーションで表示します。
デモページ - mousetip（プ）
ホバーでツールチップを表示させるとマウスに追従します。
デモページ
プログレスバー・カウント関連
- PACE（単）
さまざまなデザインのプログレスバー、上部に細いライン、サークル、カウント、バウンド、回転などを簡単に設置できます。カラーはテーマファイルで簡単に変更できます。
デモページ - LoadGo（プ）
ロゴなどの画像を使ってローディングのアニメーションを作ることができます。画像は自分の好きなものを利用できます。
デモページ - HoldOn.js（プ）
CSS3アニメーションを使ったデザインがかっこいいスピナーを実装できます。
デモページ
その他
- doppler（単）
Webページを表示し、手をかざし動かすと、ページをスクロールさせたり、コンテンツスライダーをスライドさせたりすることができます。
デモページ - Simple.Timer（プ）
時間を設定するだけで簡単に実装できるシンプルなカウントダウンタイマー。
デモページ - iFrame Resizer（単）
同一ドメイン・クロスドメインのiframeコンテンツの表示をリサイズできるスクリプト。
デモページ - Embed.js（プ）
YouTubeの動画をはじめ、VineやTEDやCodePenやツイートやPDFやGoogleマップまで簡単にページに埋め込めます。
デモページ - Lazy-loading Google Maps（プ）
Googleマップを遅延表示して、ページ表示の体感速度をアップします。
デモページ - jquerymy.js（プ）
双方向のデータバインディングをリアルタイムに行います。
デモページ - jQueryConfig
jQueryの必要としない機能を削除して、あなたが使用する機能だけのjQueryを作ることができるオンラインサービス。
sponsors
