金曜日, 12月 05, 2014

jQueryのプラグインとスクリプト100選 2014年まとめ

2014年総まとめ、jQueryのプラグインとスクリプト100選


毎年末にjQueryのプラグインをまとめていましたが、今年はプラグインの他に単体で動作するスクリプトも加えて、jQueryのプラグインとスクリプトの総まとめとして記事にしました。
今年目立ったのは、去年から引き続きアニメーション系、縦長ページ用のスクリプトでしょうか。
1カラムのレイアウトが流行っているためか背景関連も充実していました。それとSVGをより簡単に利用できるようになったのも大きな目玉ですね。
また、jQueryに依存しない、単体で動作するスクリプトも多く開発されるようになったと思います。
各スクリプト名の後にある「プ」はjQueryのプラグイン、「単」は単体で動作するスクリプトです。

背景関連

デモのキャプチャ
  • particles.js(単)
    背景にCanvasで描いた粒子でできたような幾何学状のアニメーションを簡単に実装できます。
    デモページ
  • Particleground(プ)
    ヘッダやコンテンツの背景に、Canvasで描かれた幾何学模様をパララックスエフェクトでアニメーション表示します。
    デモページ
  • CoverVid(プ)
    .mp4, .webm などの動画をブラウザいっぱいやセクションの背景として配置できます。
    デモページ
  • Vide(プ)
    .mp4, .webm などの動画をブラウザいっぱいやセクションの背景として配置できます。
    デモページ

SVG関連

デモのキャプチャ
  • Border Animation Effect with SVG(単)
    パネルのホバー時、ボーダーにキランと光るようなかっこいいアニメーションを適用します。
    デモページ
  • ProgressBar.js(単)
    SVGを使った滑らかで美しいアニメーションのプログレスバーを簡単に実装できます。
    デモページ
  • Page Loading Effects(単)
    ページのローディング時に、かっこいいさまざまなSVGのアニメーションを与えます。
    デモページ
  • SVG.js(単)
    SVGで画像にさまざまなエフェクトあたえたり、ちょっとしたインタラクションを伴ったアニメーションを手軽に実装できます。
    デモページ
  • Snap.svg(単)
    Adobe社製のSVGを使ったさまざまなコンテンツを実装できるJavaScriptライブラリ。
    デモページ
  • SVGMagic(プ)
    ページ上の画像や背景画像として使用したSVG画像をSVG非サポートブラウザで表示した際にPNG画像に自動変換します。
    デモページ
  • SVG Morpheus(単)
    SVGを使ってアイコンが次々と変わるモーフィングを楽しめるスクリプト。
    デモページ
  • Walkway(プ)
    SVGでイラストなどのラインをパスに沿ってアニメーションで描きます。
    デモページ

縦長ページ関連

デモのキャプチャ
  • pagePiling.js(プ)
    セクションごとにフルスクリーンでコンテンツを表示させる縦長スクロールページを作ります。
    デモページ
  • Midnight(プ)
    ロゴやヘッダなどをスクロール時に固定表示し、スクロールして表示されたコンテンツに応じて、固定エレメントのスタイルシートを変更させて表示します。
    デモページ
  • FSVS(プ)
    垂直に配置した複数のパネルをブラウザいっぱいに表示し、CSS3のかっこいいアニメーションでスクロールさせます。
    デモページ
  • Scrollify(プ)
    縦長ページをスクロールする時にちょうどいい位置にスナップさせます。
    デモページ
  • panelSnap(プ)
    縦長ページをスクロールする時にちょうどいい位置にスナップさせます。
    デモページ
  • isInViewport(プ)
    特定の要素がビューポートにあるかどうかを調べ、ビューポートに入ったらスタイルシートを適用できます。
    デモページ

スクロール連動・パララックス関連

デモのキャプチャ
  • ScrollReveal(単)
    最近よく見かける縦長ページ用のさまざまなアニメーションが簡単に実装できます。
    デモページ
  • ScrollMe(プ)
    スクロールしてビューポートに要素が表示された時に、さまざまなアニメーションを適用します。
    デモページ
  • Pallax + Blur + Fixed Menu(プ)
    パララックスのエフェクトで、コンテンツが指定位置の時はくっきり表示させ、スクロールしてフォーカスが変わる時にぼやけた感じになります。
    デモページ
  • scrollReveal.js(単)
    スクロール時に各要素をさまざまなアニメーションで表示させます。
    デモページ
  • WOW.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のかっこいいエフェクトのまとめ。
    デモページ
  • Pusht(プ)
    コンテンツを押し出すようにナビゲーションをスライド表示します。
    デモページ
  • Slim Menu(プ)
    レスポンシブ対応で、多階層のナビゲーションを作成します。
    デモページ
  • One Page Nav(プ)
    ページ内のどのコンテンツにいるか表示してくれるナビゲーション。
    デモページ

レイアウト関連

デモのキャプチャ
  • Simple Sidebar(プ)
    サイドバーを左右どちらからでもアニメーションでスライドさせるシンプルなスクリプト。
    デモページ
  • gridscrolling(プ)
    縦長ページで構造に合わせて水平コンテンツをうまくレイアウトします。
    デモページ
  • matchHeight(プ)
    異なる高さを単に揃えるだけでなく、グルーピングや列に応じて揃えることも可能です。
    デモページ
  • EqualHeight(プ)
    レスポンシブ対応で、高さの異なるパネルを揃えたり、成り行きにすることができます。
    デモページ
  • Sidebars(プ)
    レスポンシブ対応のナビゲーションやコンテンツを横から表示します。
    デモページ
  • Diamonds
    ダイアモンド状にコンテンツを配置します。
    デモページ

コンテンツ生成・ツアー関連

デモのアニメーション
  • transitive(単)
    インタラクション満載の路線図を実装します。
    デモページ
  • Japan Map(プ)
    日本の都道府県の地図をクリッカブルマップで表示する純国産のスクリプト。
    デモページ
  • Timesheet.js(単)
    スケジュールの横軸と各アイテムを定義するだけでタイムスケジュールシートを簡単に作成できます。
    デモページ
  • Magic Accordion(プ)
    シンプルなHTMLをアニメーションで開閉するアコーディオンにします。
    デモページ

コンテンツ紹介・ツアー関連

デモのキャプチャ

スライダー・カルーセル関連

デモのキャプチャ
  • Slider Pro(プ)
    デスクトップ、スマホ、タブレットの表示・操作に対応したさまざまなスライダーが実装できます。
    デモページ
  • Titled Content Slideshow(単)
    アイテムを浮かせて斜めにスライドさせるコンテンツスライダー。
    デモページ
  • Ideal Image Slider(単)
    レスポンシブ対応でタッチデバイス対応、CSS3のアニメーションがかっこいい画像スライダー。
    デモページ
  • Pogo Slider(プ)
    divなどで実装したパネル、複数の画像やエレメントを配置したスライダーなどにさまざまなアニメーションを適用できます。
    デモページ
  • slick(プ)
    画像やコンテンツを配置したパネルを次々に水平・垂直にスライドして表示するカルーセルのスクリプト。
    デモページ
  • oneBook3d(プ)
    画像を雑誌をめくるように3Dで次々に表示します。
    デモページ

画像拡大・配置・キャプション関連

デモのキャプチャ
  • Intense Images(単)
    クリックでもタップ快適動作で画像を拡大表示させるLightboxの進化形スクリプト。
    デモページ
  • Strip(プ)
    スマホなどの小さいスクリーンではLightbox風に、より大きいスクリーンではインタラクションのスペースを残すよう設計された画像を拡大表示するスクリプト。
    デモページ
  • Roolerblade.js(プ)
    プロダクト画像などを360度回転させたり、パノラマビューのように横長に表示させることができます。
    デモページ
  • SlipHover(プ)
    画像のホバー時の方向によってオーバーレイをスライド表示します。
    デモページ
  • ImageFit(プ)
    サイズが不明でバラバラな複数の画像を指定サイズにフィットさせて配置します。
    デモページ
  • Face Detection(プ)
    写真画像や動画から人物の顔だけを認識して、囲います。
    デモページ
  • Captioner(プ)
    画像にさまざまなタイプのキャプションを表示します。アニメーションも有り。
    デモページ

アニメーション関連

デモのキャプチャ
  • Animsition(プ)
    ページを表示する時に、スライド、フェード、回転、ぱたりなどのかっこいいアニメーションを加えます。
    デモページ
  • Morphing Buttons Concept(単)
    ボタンをクリックすると、さまざまなモーフィングのアニメーションでコンテンツが表示されます。
    デモページ
  • Impulse(単)
    スマホやタブレット向けの操作を楽しくするさまざまなアニメーションを実装できます。
    デモページ
  • Marka(単)
    画像やSVGは使用せず、CSSで作成されたアイコンをモーフィングで変形させます。
    デモページ
  • CSS3 Animate It(プ)
    要素にclassを加えるだけでCSS3アニメーションを自在に使えるようになります。
    デモページ
  • AniJS(単)
    スクロールやクリックなどさまざまなイベントをトリガーにCSS3アニメーションを適用できます。
    デモページ
  • Velocity(プ)
    CSSアニメーションのライブラリより速く動作するよう、jQueryで$.animate()を再実行してパフォーマンスを向上させます。
    デモページ
  • Matter.js(単)
    HTML5ベースの2D物理演算エンジンのスクリプト。
    デモページ

エフェクト関連

デモのアニメーション
  • Ripples(プ)
    Webページを水面にし、波紋の美しいエフェクトを実装します。
    デモページ
  • Waves(単)
    美しく広がる波紋のエフェクトが簡単に利用できます。
    デモページ
  • jQuery.twinkle(プ)
    美しく広がる波紋のエフェクトが簡単に利用できます。
    デモページ
  • whichTriangle(プ)
    画像やパネルの上をクリックしたら上辺が、中央なら全体が押されたようなエフェクトを与えます。
    デモページ
  • End Credits(プ)
    普通のWebページに映画の終わりに流れるスタッフロールみたいな演出を加えます。
    デモページ
  • Obelisk(単)
    ピクセルベースの3Dグラフィックをウェブページで利用できます。
    デモページ
  • clickstream(プ)
    ページを表示する時、離脱する時にさまざまなアニメーションを加えます。
    デモページ
  • Shine.js(単)
    テキストや画像やパネルなど、さまざまな要素にかわいいシャドウをつけます。
    デモページ

テキスト関連

デモのキャプチャ

テーブル・リスト・チャート関連

デモのキャプチャ
  • Responsive tables(単)
    一味違ったアイデアでレスポンシブ対応のテーブルを実装します。
    デモページ
  • Wholly(プ)
    スタイルシートではできないテーブルの繋がったセルをハイライトします。
    デモページ
  • MixLtUp(プ)
    テキストや画像などのコンテンツにタグをつけ、かっこいいアニメーションでフィルタリングとソートをします。
    デモページ
  • Swipe-Li(プ)
    リストの各要素をスワイプすることができます。
    デモページ

フォーム関連

デモのキャプチャ
  • Formplate(プ)
    フォームのさまざまなエレメントを異なるブラウザ、異なるスクリーンでも美しく同じ見た目にします。
    デモページ
  • Politespace(プ)
    入力された数字が見やすくなるよう指定した桁数ごとに自動で区切ります。
    デモページ
  • Placeholdem(単)
    フォームの入力欄をフォーカス時にハイライトさせ、プレースホルダのテキストをアニメーションで消します。
    デモページ
  • Labelauty(プ)
    チェックボックスやラジオボタンのラベルを美しいデザインにします。
    デモページ
  • flyLabel(プ)
    入力欄に入力すると、ラベルがアニメーションで浮き上がります。
    デモページ

パネル・ボックス関連

デモのキャプチャ
  • Amaran(プ)
    半透明やフラットのかっこいいパネルをさまざまなアニメーションで表示します。
    デモページ
  • plainOverlay(プ)
    ページ全体、ページ上のさまざまな要素にオーバーレイをかっこよく表示します。
    デモページ
  • Purplecoat.js(プ)
    画像にオーバーレイでテキストを表示したり、ボタンやテキストなどさまざまな要素にオーバーレイをアニメーションで表示します。
    デモページ
  • notifyMe(プ)
    表示ページの天地左右からアニメーションでスライド表示するパネルを実装します。
    デモページ
  • SweetAlert(単)
    JavaScriptのalertをsweetAlertに変えるだけで、かわいいデザインのアラートをアニメーションで表示します。
    デモページ

モーダルボックス・ツールチップ関連

デモのアニメーション
  • Stackbox(プ)
    ぷるぷるとかわいいアニメーションでモーダルボックスを表示させます。
    デモページ
  • thoughtBubble(プ)
    てん、てん、てん、ぽわーんとアニメーションで吹き出しを表示します。
    デモページ
  • DarkTooltip(プ)
    ホバーだけでなくクリックにも対応し、カスタマイズにも優れたツールチップを実装します。
    デモページ
  • vex(プ)
    レスポンシブ対応のモーダルウインドウをシンプルに実装します。
    デモページ

プログレスバー・カウント関連

デモのキャプチャ
  • Fort.js(単)
    ユーザーがフォームに入力する際、その進捗をサイトのデザインを損なわないよう上部にアニメーションで美しく表示します。
    デモページ
  • nanobar(単)
    ブラウザの上部に、シンプルでかっこいいナノサイズのバーをアニメーションで実装します。
    デモページ
  • Classy Countdown(プ)
    Canvasを使った美しいデザインでカウントダウンします。
    デモページ

ユーザビリティ・Google Analytics関連

デモのキャプチャ
  • jQuery A+(プ)
    a要素にclassを加えるだけで別窓や印刷、ページ内アンカーへのスクロールなどの機能を加えます。
    デモページ
  • Scroll Depth(プ)
    ユーザーがどのようにスクロールしてページを見ているかGoogle Analyticsで解析できるスクリプト。
    デモページ

その他

デモのアニメーション
  • Sticker.js(単)
    ホバーするとシールのようにぺらっとめくれるようにするスクリプト。
    デモページ
  • REM unit polyfill(単)
    CSS3からの新しい単位「rem」をIE8でも利用できるようにします。
  • Social Share(プ)
    さまざまなソーシャルサービスのシェアボタンやシェアカウンターをボタン型のデザインで実装します。
    デモページ
  • Swing(単)
    カードを重ねたり、めくるようなアニメーションが実装できます。
    デモページ
  • qrcode(プ)
    QRコードを生成することができます。



    http://coliss.com/articles/build-websites/operation/javascript/best-jquery-plugins-and-scripts-2014.html