クリエイティブな表現を実現!最新のJSライブラリ・チュートリアルまとめ

画像をカッコよく拡大表示できるJSライブラリ

今月注目のJavaScriptライブラリ、チュートリアルを紹介します。

スポンサーリンク

人気の記事

まずは、Web制作ナビで最近紹介した人気記事からピックアップ。

今、リアルタイムにサイトを見ているユーザー数を表示する方法「Real Time User」
今、リアルタイムにサイトを見ているユーザー数を表示する方法「Real Time User」
Twitter、Instagram、YouTube、GoogleMapなどサイトにあらゆるものを埋め込むことができるJS「embed.js」
Twitter、Instagram、YouTube、GoogleMapなどサイトにあらゆるものを埋め込むことができるJS「embed.js」
Twitterのツイート数をカウント、表示する方法 widgetoon.js & count.jsoon
Twitterのツイート数をカウント、表示する方法 widgetoon.js & count.jsoon
Drift.jsを使ってECサイトでよく見かける商品画像の拡大表示を実装する方法
Drift.jsを使ってECサイトでよく見かける商品画像の拡大表示を実装する方法
カラフルなポリゴンスタイルの画像を生成することができるJSライブラ「Trianglify」
カラフルなポリゴンスタイルの画像を生成することができるJSライブラ「Trianglify」
綺麗なカウント付きシェアボタンを簡単に設置できるJS「Shr」
綺麗なカウント付きシェアボタンを簡単に設置できるJS「Shr」
iframe、object、embed、videoをレスポンシブ対応にできる軽量のjQueryプラグイン「Flexy」
iframe、object、embed、videoをレスポンシブ対応にできる軽量のjQueryプラグイン「Flexy」
アラートメッセージの決定版!リッチなアラートモーダルを実装できるJSプラグイン「SweetAlert2」
アラートメッセージの決定版!リッチなアラートモーダルを実装できるJSプラグイン「SweetAlert2」
使いやすい!HTMLテーブルをxlsx、csv、txt形式でダウンロードできるjQueryプラグイン「TableExport.js」
使いやすい!HTMLテーブルをxlsx、csv、txt形式でダウンロードできるjQueryプラグイン「TableExport.js」
アナログ時計を簡単に実装できるjQueryプラグイン(世界時計対応)「jClocksGMT」
アナログ時計を簡単に実装できるjQueryプラグイン(世界時計対応)「jClocksGMT」
マテリアルデザインでよく見かける波紋エフェクトを実装できる『jQuery Rippleria』
マテリアルデザインでよく見かける波紋エフェクトを実装できる『jQuery Rippleria』
いい感じ!SVGを使ったクールなスライダーエフェクトを実装できるjQueryプラグイン『Radial SVG Slider』
いい感じ!SVGを使ったクールなスライダーエフェクトを実装できるjQueryプラグイン『Radial SVG Slider』
画像に使われている色を抽出して、背景色を自動設定できるjQueryプラグイン「adaptive-backgrounds.js」
画像に使われている色を抽出して、背景色を自動設定できるjQueryプラグイン「adaptive-backgrounds.js」
動画を背景にフルスクリーンで表示できるJSライブラリ「bideo.js」
動画を背景にフルスクリーンで表示できるJSライブラリ「bideo.js」
select要素のoptionをポップアップ選択できるUIを実装するjQueryプラグイン PopSelect
select要素のoptionをポップアップ選択できるUIを実装するjQueryプラグイン PopSelect

クリエイティブな表現を実現!最新のJSライブラリ・チュートリアルまとめ

画像をカッコよく拡大表示できるJSライブラリ

画像をカッコよく拡大表示できるJSライブラリ

画像をクリックすると、カッコよく拡大表示することができます。

Lightense Images

画像を素早く拡大表示するJSライブラリ

画像を素早く拡大表示するJSライブラリ

画像をクリックすると、素早く拡大表示することができます。

Intense Images

マルチレイヤーのページ遷移エフェクトを実装するチュートリアル

マルチレイヤーのページ遷移エフェクトを実装するチュートリアル

モダンなデザインのページ遷移エフェクトを実装するチュートリアルです。

Multi-Layer Page Reveal Effects  | デモ

クリエイティブな画像切り替えエフェクト

クリエイティブでおしゃれな画像切り替えエフェクト

クリエイティブで、他では見たことがない、画期的な画像切り替えエフェクトです。

THREE Image Transition

マウスオーバーやクリックで音声を再生

マウスオーバーやクリックで音声を再生

ボタンや画像にマウスオーバーしたり、ボタンのクリックで、mp3やoggファイルの音声を再生できます。インタラクティブなサイトを作成するときに使えそうです。

Loud links

スマホで動画を埋め込み表示することができるJSライブラリ

スマホで動画を埋め込み表示することができるJSライブラリ

スマホで動画を埋め込み表示することができるJSライブラリです。

iphone-inline-video | デモ

入力されたテキストに応じて綺麗なパターン画像を生成

入力されたテキストに応じて綺麗なパターン画像を生成

綺麗なパターン画像を生成するJSライブラリです。画像はSVG、入力されたテキストによって画像が変わります。例えば、記事タイトルによって自動的に見出しの背景画像を設定する、などの使い方ができます。GitHub Guidesのページでは実際にそのような使われ方をしています。

GeoPattern | デモ

シンプルで軽量なモーダルJS

シンプルで軽量なJSモーダル

シンプルで軽量、使いやすいJSモーダルです。モーダル内でGIFアニメを再生したり、iframeで外部サイトを表示することもできます。

Vanilla Modal | デモ

写真をスライド表示できるJSモーダル

写真をスライド表示できるJSモーダル

写真をスライド表示できるJSモーダルです。

baguetteBox.js

CSS transitionsを使ったモーダル

CSS transitionsを使ったモーダル

CSS Transitionsを使ったモーダル表示ライブラリです。

CSS transitions

ページ内の高速リアルタイム検索

ページ内を高速リアルタイム検索
ページ内のコンテンツの高速リアルタイム検索ができるスクリプトです。

Holmes.js | デモ

JSでiOSのSwitch Control風のon、offボタンを実装する方法

JSでiOSのSwitch Control風のon、offボタンを実装する方法

iOSでよく見かける機能をオン、オフするスライドボタン、Switch Controlと呼ばれるこのUIをWebサイトで実装することができます。

Switchable | デモ

JSで実装する進捗状況のチェックリスト

JSで実装する進捗状況のチェックリスト

JavaScriptを使って、進捗状況を把握するためのチェックリストを実装します。

Web designer’s checklist | デモ

映画のオープニングのようなタイプライター風のテキストアニメーション

2016-06-17_19h54_44

映画のオープニングで見かける、タイプライター風にテキストを表示するアニメーションを実装することができるJSライブラリです。

TypeWriting.js | デモ

コンテンツをエンドレスに横スクロールできるjQueryプラグイン

コンテンツをエンドレスに横スクロールできるjQueryプラグイン

Endless Riverはコンテンツをエンドレスに横スクロールできるjQueryプラグインです。再生、停止、逆回転用のコントロールボタンがついています。コンテンツの横幅を指定する必要がありません。写真などをエンドレスな自動スクロールで表示したいときに使えそうです。

Endless River | デモ

チェックボックス、ラジオボタンをタッチデバイスで使いやすいボタン形式に変換できるjQueryプラグイン

チェックボックス、ラジオボタンをタッチデバイスで使いやすいボタン形式に変換できるjQueryプラグイン

チェックボックスやラジオボタンを、スマートフォンやタブレットで使いやすいボタン形式に変換することができるjQueryプラグインです。

zInput | デモ

フォーム入力でキラキラエフェクト

フォーム入力でキラキラエフェクト

フォームに入力すると、キラキラとしたエフェクトがでます。

Pixie Dust Input

jQuery+CSS3で円が画面全体に広がる系スマホメニュー

jQuery+CSS3で円が画面全体に広がる系スマホメニュー

ハンバーガーメニューのアイコンをクリックすると、円が全体に広がるアニメーションでメニューが展開されます。jQuery、CSS3で実装します。

jQuery+CSS3で円が画面全体に広がる系スマホメニュー

順番を指定して画像を読み込むことができるJS

順番を指定して画像を読み込むことができるJS

JavaScriptを使って、画像の読み込み順序を指定することができます。複数枚の画像を同時の読みこませることもできるので、使い勝手が良さそうです。

EagerImageLoader

iframeをレスポンシブ対応する方法

iframeをレスポンシブ対応する方法

iframeをレスポンシブ対応する方法です。

Making IFrames Responsive

コードをハイライト表示するJSライブラリ

コードをハイライト表示するJSライブラリ

コードの可読性を高めて、ハイライト表示するJSライブラリです。

microlight.js

インタラクティブなチャートライブラリ

インタラクティブなチャートライブラリ

インタラクティブなチャートのライブラリです。

C3.js

軽量のHTML5スライダー

軽量のHTML5スライダー

軽量のHTML5スライダーです。

Multirange: A tiny polyfill for HTML5 multi-handle sliders.

スライダーをスマホ、タブレットなどタッチデバイス用に最適化

スライダーをスマホ、タブレットなどタッチデバイス用に最適化

スライダーをスマホ、タブレットなどタッチデバイス用に最適化することができます。

noUiSlider

textareaでタブ入力を有効にするjQueryプラグイン

textareaでタブ入力を有効にするJavaScript「Textarea Tabbing」

コード入力用にtextareaを使用する際、tab入力をしたいときがあります。通常は、textareaでtabキーを押すと、フォーカスが外れてしまいますが、JavaScriptでタブ入力を可能にする方法が紹介されています。下の方で紹介されているコードがjQueryバージョンです。

Textarea Tabbing | デモ

3Dグリッドレイアウトのおしゃれなギャラリー

3Dグリッドレイアウトのおしゃれなギャラリー

3Dのグリッドデザインを実装することができます。スースコードが公開されています。

Isometric and 3D Grids | デモ

キーワードをハイライト表示できるJSライブラリ

キーワードをハイライト表示できるJSライブラリ

検索ボックスに入力されたキーワードと一致するキーワードをハイライト表示します。純粋なJavaScriptバージョンと、jQueryプラグインバージョンがあります。

mark.js | デモ

メニューにラジオボタンやチェックボックスを追加するjQueryプラグイン

jQuery .contextMenuCommon

コンテキストメニューとは、いわゆるショートカットメニューのことです。このコンテキストメニューにラジオボタンやチェックボックス機能を追加することができます。また、FontAwsomeなどのアイコンを表示することも可能です。

jQuery.contextMenuCommon

回転する3Dの地球儀を作成できるjQuery UI プラグイン

回転する3Dの地球儀を作成できるjQuery UI プラグイン

HTML Canvasを使って、3Dの地球儀を回転することができるjQuery UIプラグインです。地球表面のテクスチャの変更、回転方向や速度の変更ができます。2つの地点を結んでラインを描き、飛行機をそのライン上でフライトさせることができます。

jquery.earth-3d.js

スクロール量に応じてプログレスバーを表示するjQueryプラグイン

スクロール量に応じてプログレスバーを表示するjQueryプラグイン

スクロール量に応じてプログレスバーを進めることができるjQueryプラグインです。

Scrollgress | デモ

巨大ディスプレイのためのGoogle製ライブラリ

壁に埋め込んだ電気スイッチやボタンをディスプレイのピクセルとして扱えるGoogle製ライブラリ

電気スイッチやボタンなど、リアルなものをピクセルとして扱い、インタラクティブな巨大ディスプレイを作ることができます。Googleがオープンソースで公開しているライブラリです。

anypixel.js

JavaScriptプラグインのギャラリーサイト

便利なJavaScriptをコレクションしているサイト

便利なJavaScriptプラグインを紹介しているコレクションサイトです。

The Vanilla Javascript Repository

ChromeのデベロッパーツールでJSをデバッグする方法

ろそろ覚えておきたい! ChromeのデベロッパーツールでのJSをデバッグする方法(入門編)

Chromeデベロッパーツールを使って、JavaScriptをデバッグする方法です。JSを使うなら、是非覚えておきましょう。

そろそろ覚えておきたい! ChromeのデベロッパーツールでのJSをデバッグする方法(入門編)

人気の記事

日本語対応の無料WordPressテーマ10選
日本語対応の無料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
アドセンス運用に最適なWordPressテーマ3選
アドセンス運用に最適なWordPressテーマ3選
スポンサーリンク

関連記事 & スポンサーリンク

コメント

  • Posted on
  • Updated on
  • Views 2,122