2016年総まとめ、JavaScriptのライブラリやjQueryのプラグイン100+α選

Post on:2016年12月15日

毎年恒例のJavaScriptのライブラリやjQueryのプラグインの総まとめを紹介します。

今年リリースされたものから、アップデートされたものまで、これからのWebページやスマホページの制作に役立つJavaScriptを100+αまとめました。

2016年総まとめ、JavaScriptのライブラリやjQueryのプラグイン100+α選

アニメーション関連のJavaScript

デモのキャプチャ
  • KUTE.js
    クロスブラウザ対応のさまざまなアニメーション、2Dと3Dの変形、SVGの変形、CSSのプロパティ値の変化、SVGのモーフィング、SVGの描画などネイティブのJavaScriptでアニメーションを実現する軽量スクリプト。
    デモページ
  • Choreographer-js
    「choreographer」は振り付けという意味、CSSアニメーションのさまざまな動き・振る舞いを簡単に設定できます。
    デモページ
  • Barba.js
    通常のリンクのアクションによるハードリフレッシュをなくし、HTTPリクエストと描画を最小限に抑え、更にエフェクトを加えることで、非常に高速でシームレスなページ遷移を実現します。
    デモページ
  • iconate.js
    オフキャンバス メニューなどで最近よく見かける、アイコンをクリック・タップすると、別のアイコンにアニメーションで変形させます。
    デモページ
  • voxel.css
    高校を卒業したばかりの18才の少年がつくった3Dアニメーションのライブラリ
    デモページ
  • Popmotion
    CSS, SVG, SVGのパスなど、ネイティブのDOMをサポートするモーションエンジン。
    デモページ
  • bounce.js
    アニメーションをキーフレームを使ってコントロールできるスクリプト。
    デモページ
  • Dynamics.js
    反発係数を使って弾み具合を変化させたり、運動量に応じて質量を変化させたり、引っ張ると引っ張り返され押すと押し返されるなど、物理法則に基づいた滑らかなさまざまなアニメーションを実装できます。
    デモページ
  • GreenSock
    CSSのプロパティだけでなく、JavaScriptのオブジェクトのあらゆるプロパティもアニメーションさせることができます。
    デモページ
  • anime.js
    SVGやDOMの属性、JavaScriptのオブジェクトをさまざまなアニメーションで軽快に操作できる軽量のスクリプト。
    デモページ

SVG関連のJavaScript

デモのキャプチャ

Canvas関連のJavaScript

デモのキャプチャ

スクロール関連のJavaScript

デモのキャプチャ
  • in-view.js
    スクロールして、要素がビューポートに入った時と出る時に、アニメーションを適用できます。
    デモページ
  • AOS
    スクロールすると、コンテンツをふわっと表示させたり、パタリと回転させたり、ズームさせたり、軽快なアニメーションを使ったエフェクトを実装できます。
    デモページ
  • kissui.scrollanim
    スクロールに連動するCSSアニメーションのライブラリ。
    デモページ
  • ScrollTrigger
    要素のスクロール ポジションに基づいてアニメーションを適用させるので、下にスクロールした時だけでなく、上にスクロールした時、繰り返し下にスクロールした時にも同様に適用することができます。
    デモページ
  • Rellax
    パララックススクロールを簡単に実装できる軽量のライブラリ。デスクトップのみ。
    デモページ
  • Parallax.js
    これもパララックス、こちらはスマホ対応で、ジャイロスコープ、加速度センサに対応。
    デモページ
  • jump.js
    ページ内アンカーのスムーススクロールを実装。
    デモページ
  • lavalamp.js
    最近また見直されてきた無限スクロールを実装できるスクリプト。勝手にコンテンツを読み込むのではなく、ユーザーのアクションをトリガーに読み込みます。
    デモページ
  • Scrollify
    縦長ページでスクロールする時に、ちょうどいい位置にスナップさせます。
    デモページ
  • Changing Background Color while scrolling
    縦長ページで積み重ねたコンテンツごとに背景のカラーをアニメーションで変更します。
    デモページ

レイアウト関連のJavaScript

デモのキャプチャ
  • Multiple.js
    半透明の美しいグラデーションが複数のパネルにまたがり、背景を続き画像として配置す。
    デモページ
  • Isometric Grids
    PSDのモックアップを見ているかのような3Dのアイソメトリックのグリッドにパネルやカードを配置し、インタラクションも備えたスクリプトです。
    デモページ
  • diamonds.js
    アイテムをダイアモンド状に配置するスクリプト。レスポンシブ対応で、サイズや溝も簡単に設定できます。
    デモページ
  • BubbleLayout
    ベースにはmo.jsが使われており、バブルをクリックしてからの遷移だけでなく、バブル自体も楽しいアニメーションで動かすことができます。デモページで実際の動きに触れてみてください。
    デモページ
  • Minigrid
    レスポンシブ対応のカード型レイアウトを実装できるシンプルで超軽量なスクリプト。アニメーションでレイアウトが変更する系はこのスクリプトが圧倒的に簡単で軽量です。
    デモページ
  • stackgrid.adem.js
    HTMLの実装は非常にシンプルで、divで実装した各コンテナのカラム数・幅・溝をアニメーションで変更します。レスポンシブ対応で、コンテナの増減にも対応。
    デモページ
  • Bricklayer
    Pinterestのようにコンテンツをレンガ状に配置する軽量スクリプト。
    デモページ
  • Bricks.js
    表示サイズに合わせて、カラム数や溝を指定してコンテンツを配置できます。
    デモページ
  • SplitLayout
    今年増えた中央分割のレイアウト。サムネイルをクリックすると、それぞれアニメーションでコンテンツが表示されます。
    デモページ
  • Split.js
    コンテンツを指定した箇所で分割して、表示します。
    デモページ
  • screenfull.js
    ページを全画面表示で表示します。終了する時はescキーで。
    デモページ

カラー関連のJavaScript

デモのキャプチャ
  • Granim.js
    美しいグラデーションをアニメーションで描画します。
    デモページ
  • Chroma.js
    あらゆる種類のカラー変換とカラースケールを設定できます。
    デモページ
  • Hue
    カードやリストの各アイテムに美しいグラデーションを適用するなど、コンテンツごとにカラーを適用できます。
    デモページ
  • Aquarelle
    水彩の美しいエフェクトをアニメーションで適用できます。
    デモページ

画像関連のJavaScript

デモのキャプチャ
  • Intense Images
    画像をフルスクリーンで拡大表示。シンプルなインタラクションにも対応しています。
    デモページ
  • enhance.js
    Mediumで採用されているような画像拡大のエフェクトに、より使いやすくなるように工夫が加えられたスクリプト。アニメーションがより洗練され、スマホなどの小さいサイズではクロップして画像を表示します。
    デモページ
  • baguetteBox.js
    シンプルなLightboxのスクリプト。ギャラリーにも対応。
    デモページ
  • Luminous
    プロダクト写真など、画像の一部を別枠で拡大表示します。
    デモページ
  • Grade.js
    写真やイラストに使用されているカラーの中から、主要なカラーを選び出し、その画像を引き立たせるグラデーションをつくりだすスクリプト。
    デモページ
  • LowPolifier
    画像をローポリに変換します。
    デモページ

  • Background Blur
    背景にセットした画像にブラーを適用して、ぼかして表示します。
    デモページ

スライダー関連のJavaScript

デモのキャプチャ
  • Flipster
    レスポンシブ対応、タッチデバイス対応、CSS3アニメーションを使った快適操作が気持ちいいさまざまなフリップコンテンツが実装できます。
    デモページ
  • pageSwitch
    121種類のアニメーションをサポート、スライド、ぱたり、くるり、ぐい～んなどコンテンツやパネルをさまざまなアニメーションで表示させます。
    デモページ
  • Siema
    ピュアJavaScriptのシンプルで軽量のカルーセル。
    デモページ
  • lightgallery
    画像や動画の軽量ギャラリー。自動再生、拡大、全画面表示、シェア、ダウンロードなどの機能も備えています。
    デモページ

動画関連のJavaScript

デモのキャプチャ
  • Super Embed
    YouTube, Vimeo, Vine, VideoPress, DairyMotionなど、さまざまな動画コンテンツをレスポンシブ対応で実装。
    デモページ
  • Bideo.js
    HTML 5 Videoをフルスクリーンの背景に配置できます。
    デモページ
  • Vidage
    動画や画像をフルスクリーンの背景に配置できます。
    デモページ
  • video.js
    数多くのサイトで利用されているHTML 5対応の動画プレイヤー。
    デモページ
  • Plyr
    YouTube, Vimeoなど、動画にオリジナルのコントローラーを配置できるアクセシブルなプレイヤー。
    デモページ
  • embed.js
    動画・マップ・ツイート・コード・絵文字などを自動で判別して埋め込みます。
    デモページ
  • iphone-inline-video
    スマホで自動的にフルスクリーンで動画を表示されます。
    デモページ

サウンド関連のJavaScript

デモのキャプチャ

UIエレメント・コンポーネント関連のJavaScript

デモのキャプチャ
  • footerMenu
    スクロールすると、フッタを固定表示します。
    デモページ
  • HoverSlippery
    ナビゲーションの各アイテムをホバー時に、ハイライトやラインをつけます。
    デモページ
  • Turnbox.js
    箱にこだわってる人にオススメ。あらゆるものを立方体にし、アニメーションで回転させます。
    デモページ
  • Social Share for Mobile Users
    スマホ用にソーシャルコンテンツのシェアボタンを配置します。
    デモページ
  • Tip Cards
    Google Tipsに採用されているカード型コンテンツにインスパイアされたスクリプト。チップスが集まってくるようなエフェクトはコンテンツに合ってますね。
    デモページ

通知パネル・モーダル関連のJavaScript

デモのキャプチャ
  • iziToast
    エレガントで美しいアニメーションで、通知パネルを表示します。
    デモページ
  • Push.js
    デスクトップやスマホの通知を設定できるスクリプト。
    デモページ
  • Popper.js
    さまざまなアニメーションでツールチップを表示します。
    デモページ
  • Subscribe Better
    ページの最下部にいくと、モーダルウインドウを表示します。最初や途中に出されるとイラっとしますが、それに比べると最下部なら、という気持ちになります。
    デモページ
  • Modaal
    アクセシブルなモーダルウインドウ。
    デモページ
  • Custombox
    さまざまなアニメーションでモーダルウインドウを表示します。
    デモページ
  • Tingle.js
    ミニマルで、実装も簡単なモーダルウインドウ。
    デモページ

プログレスバー・ローディング関連のJavaScript

デモのキャプチャ

ヘルプ・案内関連のJavaScript

デモのキャプチャ

チャートやグラフ関連のJavaScript

デモのキャプチャ

判別関連のJavaScript

デモのキャプチャ
  • EQCSS
    Media Queriesはメディア、いわゆるデバイスの幅や高さや解像度や種類に基づいて、スタイルを定義できます。「EQCSS」はElement Queries、要素の幅や高さ、子要素の数、文字数や行数など、コンテンツの異なる状態によってレスポンシブな条件を定義することができます。
    デモページ
  • Feature.js
    スマホ・タブレット・デスクトップのブラウザがさまざまな機能（WebGL, Canvas, rem unit, async属性、タッチイベントなど）に対応しているか判別し、その判定を利用することができます。
    デモページ
  • isMobile
    iPhone, iPod, iPad, Android, Nexus, Galaxy, Kindleなど、スマホやタブレットの各デバイスを判定できます。
  • ifvisible.js
    ページを開いているタブがアクティブかどうか、マウスやキーボードでなんらかの操作をしていないかどうか判定できます。
    デモページ
  • UAParser

    ブラウザ・デバイス・レンダリングエンジン・OS・CPUなどのUA情報を返します。
    デモページ

  • tracking.js
    画像や動画、カメラから顔の検出、カラー検出などが可能です。
    デモページ
  • zingtouch
    タッチデバイスのジェスチャー、タップ・スワイプ・ピンチ・パンなどを検出します。
    デモページ

画像やフォントの遅延読み込み関連のJavaScript

デモのキャプチャ

操作・インタラクション関連のJavaScript

デモのキャプチャ
  • HumanInput
    キーボードやマウス操作など、人が生成するイベントを取得します。
    デモページ
  • PulltoRefresh.js
    スマホやタブレットの便利操作、プルダウンするとリフレッシュできる機能をページに簡単に実装できます。
    デモページ
  • Hammer.js
    タッチデバイスのさまざまなジェスチャーをページに利用できます。
    デモページ
  • Pressure.js
    タッチと3Dタッチの両方を扱えます。
    デモページ
  • Swiper
    iOS/Androidなど、モバイル向けのWebサイト、Webアプリ、ネイティブアプリでの利用に最適化されたタッチデバイス対応のスライダー。
    デモページ

サイト検証・分析関連のJavaScript

デモのキャプチャ
  • Autotrack
    Google純正。ページ上のあらゆる要素のクリックイベント、メディアクエリのトラッキング、TwitterやFacebookボタンのトラッキングなどをGoogle Analyticsで自動的に取得することができます。
  • Boba.js
    Google Analyticsのさまざまな機能を簡単に利用できるライブラリ。
  • appmetrics.js
    Webアプリのパフォーマンスを記録し、必要に応じてそれらをGoogle Analyticsで測定できます。
  • WebGazer.js
    Webcamを通じて、ユーザーのアイトラッキングを取得。

その他のJavaScript

デモのキャプチャ
  • Descartes
    CSSをJavaScriptで記述し、スタイルの定義、変数・関数の利用、レスポンシブやスクロールなどのイベントに動的に値を生成できます。
    デモページ
  • pageAccelerator
    ページ上のすべてのリンクをたどり先読みし、ページを素早く表示します。
  • clipboard.js
    クリップボードにテキストをコピーさせることができます。
  • JSZip
    zipファイルを生成、読み込み、編集できます。
  • timeago.js
    何秒前、何分前、何時間前、何日前という表示できます（日本語対応）。
  • Egg.js
    ページにイースターエッグを仕込むことができます。
  • bwip-js
    バーコードを生成できます。
  • Tesseract.js
    100以上の言語（UTF-8サポート）に対応したOCRライブラリ。書き出しはプレーンテキスト・HTML・PDFをサポート。
    デモページ

sponsors

top of page

©2024 coliss