2014年総まとめ、jQueryのプラグインとスクリプト100選
Post on:2014年12月5日
sponsors
毎年末にjQueryのプラグインをまとめていましたが、今年はプラグインの他に単体で動作するスクリプトも加えて、jQueryのプラグインとスクリプトの総まとめとして記事にしました。
今年目立ったのは、去年から引き続きアニメーション系、縦長ページ用のスクリプトでしょうか。
1カラムのレイアウトが流行っているためか背景関連も充実していました。それとSVGをより簡単に利用できるようになったのも大きな目玉ですね。
また、jQueryに依存しない、単体で動作するスクリプトも多く開発されるようになったと思います。
- 背景関連
- SVG関連
- 縦長ページ関連
- スクロール連動・パララックス関連
- その他スクロール操作・補助関連
- レスポンシブ関連
- ナビゲーション関連
- レイアウト関連
- コンテンツ生成関連
- コンテンツ紹介・ツアー関連
- スライダー・カルーセル関連
- 画像拡大・配置・キャプション関連
- アニメーション関連
- エフェクト関連
- テキスト関連
- タブ・アコーディオン関連
- テーブル・リスト・チャート関連
- フォーム関連
- パネル・ボックス関連
- モーダルボックス・ツールチップ関連
- プログレスバー・カウント関連
- ユーザビリティ・Google Analytics関連
- その他
各スクリプト名の後にある「プ」はjQueryのプラグイン、「単」は単体で動作するスクリプトです。
背景関連
-
- particles.js（単）
- 背景にCanvasで描いた粒子でできたような幾何学状のアニメーションを簡単に実装できます。
- デモページ
-
- Particleground（プ）
- ヘッダやコンテンツの背景に、Canvasで描かれた幾何学模様をパララックスエフェクトでアニメーション表示します。
- デモページ
SVG関連
-
- Border Animation Effect with SVG（単）
- パネルのホバー時、ボーダーにキランと光るようなかっこいいアニメーションを適用します。
- デモページ
-
- ProgressBar.js（単）
- SVGを使った滑らかで美しいアニメーションのプログレスバーを簡単に実装できます。
- デモページ
-
- Page Loading Effects（単）
- ページのローディング時に、かっこいいさまざまなSVGのアニメーションを与えます。
- デモページ
-
- SVG Morpheus（単）
- SVGを使ってアイコンが次々と変わるモーフィングを楽しめるスクリプト。
- デモページ
縦長ページ関連
-
- pagePiling.js（プ）
- セクションごとにフルスクリーンでコンテンツを表示させる縦長スクロールページを作ります。
- デモページ
-
- isInViewport（プ）
- 特定の要素がビューポートにあるかどうかを調べ、ビューポートに入ったらスタイルシートを適用できます。
- デモページ
スクロール連動・パララックス関連
-
- ScrollReveal（単）
- 最近よく見かける縦長ページ用のさまざまなアニメーションが簡単に実装できます。
- デモページ
-
- Pallax + Blur + Fixed Menu（プ）
- パララックスのエフェクトで、コンテンツが指定位置の時はくっきり表示させ、スクロールしてフォーカスが変わる時にぼやけた感じになります。
- デモページ
-
- scrollReveal.js（単）
- スクロール時に各要素をさまざまなアニメーションで表示させます。
- デモページ
-
- Stellar.js（単）
- 垂直・水平のパララックスやカーテンのエフェクトが実装できます。
- デモページ
-
- Swift Parallax（プ）
- 要素や背景をスクロールに合わせてアニメーションさせます。
- デモページ
-
- ScrollMagic（プ）
- スクロール時にさまざまな楽しいエフェクトを与えます。スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、div要素の内側のスクロールなどにも対応しています。
- デモページ
-
- Parallax ImageScroll（プ）
- ページをスクロールすると、パララックスのエフェクトで次々に画像とコンテンツをカーテンを引き上げるように表示します。
- デモページ
その他スクロール操作・補助関連
-
- browserSwipe（プ）
- コンテンツをスクロールするとスワイプのように次々にアニメーションで表示します。
- デモページ
-
- ScrollUpBar（プ）
- ヘッダやナビゲーションなどを下にスクロールした時には隠し、上にした時に表示します。
- デモページ
-
- Endless.JS（プ）
- ページを下方向だけでなく、上（マイナス）や横にも増やし無限スクロール対応にします。
- デモページ
-
- Fancy Scroll（プ）
- スマフォでスクロールした時の一番上と下ではずむようなエフェクトをデスクトップでも再現させます。
- デモページ
レスポンシブ関連
-
- Respontent（プ）
- 画像やテキスト、テーブル、iframeのGoogleMapsやYouTubeなど、コンテンツを表示サイズに応じて自動で最適化します。
- デモページ
-
- FocusPoint（プ）
- 画像をデスクトップではそのまま表示し、スマホやタブレットなどでは指定した箇所を中心にクロップして表示します。
- デモページ
ナビゲーション関連
-
- Off Canvas Menu Effects（単）
- メニューをサイドやトップ・ボトムから気持ちいいアニメーションで表示させるOff Canvas Menuのかっこいいエフェクトのまとめ。
- デモページ
-
- One Page Nav（プ）
- ページ内のどのコンテンツにいるか表示してくれるナビゲーション。
- デモページ
レイアウト関連
-
- Simple Sidebar（プ）
- サイドバーを左右どちらからでもアニメーションでスライドさせるシンプルなスクリプト。
- デモページ
-
- gridscrolling（プ）
- 縦長ページで構造に合わせて水平コンテンツをうまくレイアウトします。
- デモページ
-
- matchHeight（プ）
- 異なる高さを単に揃えるだけでなく、グルーピングや列に応じて揃えることも可能です。
- デモページ
-
- EqualHeight（プ）
- レスポンシブ対応で、高さの異なるパネルを揃えたり、成り行きにすることができます。
- デモページ
コンテンツ生成・ツアー関連
-
- transitive（単）
- インタラクション満載の路線図を実装します。
- デモページ
-
- Timesheet.js（単）
- スケジュールの横軸と各アイテムを定義するだけでタイムスケジュールシートを簡単に作成できます。
- デモページ
-
- Magic Accordion（プ）
- シンプルなHTMLをアニメーションで開閉するアコーディオンにします。
- デモページ
コンテンツ紹介・ツアー関連
スライダー・カルーセル関連
-
- Slider Pro（プ）
- デスクトップ、スマホ、タブレットの表示・操作に対応したさまざまなスライダーが実装できます。
- デモページ
-
- Titled Content Slideshow（単）
- アイテムを浮かせて斜めにスライドさせるコンテンツスライダー。
- デモページ
-
- Ideal Image Slider（単）
- レスポンシブ対応でタッチデバイス対応、CSS3のアニメーションがかっこいい画像スライダー。
- デモページ
-
- Pogo Slider（プ）
- divなどで実装したパネル、複数の画像やエレメントを配置したスライダーなどにさまざまなアニメーションを適用できます。
- デモページ
画像拡大・配置・キャプション関連
-
- Intense Images（単）
- クリックでもタップ快適動作で画像を拡大表示させるLightboxの進化形スクリプト。
- デモページ
-
- Roolerblade.js（プ）
- プロダクト画像などを360度回転させたり、パノラマビューのように横長に表示させることができます。
- デモページ
-
- Face Detection（プ）
- 写真画像や動画から人物の顔だけを認識して、囲います。
- デモページ
アニメーション関連
-
- Animsition（プ）
- ページを表示する時に、スライド、フェード、回転、ぱたりなどのかっこいいアニメーションを加えます。
- デモページ
-
- Morphing Buttons Concept（単）
- ボタンをクリックすると、さまざまなモーフィングのアニメーションでコンテンツが表示されます。
- デモページ
-
- CSS3 Animate It（プ）
- 要素にclassを加えるだけでCSS3アニメーションを自在に使えるようになります。
- デモページ
エフェクト関連
-
- jQuery.twinkle（プ）
- 美しく広がる波紋のエフェクトが簡単に利用できます。
- デモページ
-
- whichTriangle（プ）
- 画像やパネルの上をクリックしたら上辺が、中央なら全体が押されたようなエフェクトを与えます。
- デモページ
-
- End Credits（プ）
- 普通のWebページに映画の終わりに流れるスタッフロールみたいな演出を加えます。
- デモページ
-
- clickstream（プ）
- ページを表示する時、離脱する時にさまざまなアニメーションを加えます。
- デモページ
テキスト関連
-
- jQuery.Kerning.js（プ）
- 日本語のどんなWebフォントでも美しくカーニングできるスクリプト。
- デモページ
-
- CurvedText（プ）
- テキストをかわいくサークル状に配置できます。
- デモページ
テーブル・リスト・チャート関連
-
- Responsive tables（単）
- 一味違ったアイデアでレスポンシブ対応のテーブルを実装します。
- デモページ
フォーム関連
-
- Politespace（プ）
- 入力された数字が見やすくなるよう指定した桁数ごとに自動で区切ります。
- デモページ
-
- Placeholdem（単）
- フォームの入力欄をフォーカス時にハイライトさせ、プレースホルダのテキストをアニメーションで消します。
- デモページ
パネル・ボックス関連
-
- plainOverlay（プ）
- ページ全体、ページ上のさまざまな要素にオーバーレイをかっこよく表示します。
- デモページ
-
- Purplecoat.js（プ）
- 画像にオーバーレイでテキストを表示したり、ボタンやテキストなどさまざまな要素にオーバーレイをアニメーションで表示します。
- デモページ
-
- SweetAlert（単）
- JavaScriptのalertをsweetAlertに変えるだけで、かわいいデザインのアラートをアニメーションで表示します。
- デモページ
モーダルボックス・ツールチップ関連
-
- thoughtBubble（プ）
- てん、てん、てん、ぽわーんとアニメーションで吹き出しを表示します。
- デモページ
-
- DarkTooltip（プ）
- ホバーだけでなくクリックにも対応し、カスタマイズにも優れたツールチップを実装します。
- デモページ
プログレスバー・カウント関連
-
- Classy Countdown（プ）
- Canvasを使った美しいデザインでカウントダウンします。
- デモページ
ユーザビリティ・Google Analytics関連
-
- Scroll Depth（プ）
- ユーザーがどのようにスクロールしてページを見ているかGoogle Analyticsで解析できるスクリプト。
- デモページ
その他
-
- Sticker.js（単）
- ホバーするとシールのようにぺらっとめくれるようにするスクリプト。
- デモページ
-
- REM unit polyfill（単）
- CSS3からの新しい単位「rem」をIE8でも利用できるようにします。
-
- Social Share（プ）
- さまざまなソーシャルサービスのシェアボタンやシェアカウンターをボタン型のデザインで実装します。
- デモページ
-
- qrcode（プ）
- QRコードを生成することができます。
sponsors
