プログラミング

プログラミング

PR

ウェブサイトをレベルアップさせる!jQueryプラグイン26選

RankRED

RankRed is a place where you can find a lot of interesting and inspiring stuff about science and technology, internet, programming tools and plugins, robots, machines and high tech gadgets, and much more.

本記事は、26 Modern jQuery Plugins To Make Your Website Better
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

1,772 views

読了時間 : 約5分26秒

自分のウェブサイトをあらゆるデバイスで動作させてより多くの人に見てもらいたいと、誰もが思っているでしょう。この目標を達成するのに、jQueryはピッタリな選択肢です。jQueryはクライアントサイドのHTMLスクリプトをシンプルにするために作られたJavaScriptライブラリで、アニメーションの作成やナビゲーションの簡素化、イベントの処理、Ajaxアプリケーションの開発などに役立ちます。

 

jQueryプラグインの質と量にはいつも驚かされます。同じような機能を作るたびに車輪を再発明する必要はなく、プラグインを使えばすぐに機能を追加することができるのです。ここでは、あなたのウェブサイトをより良くするのに役立つ、便利でモダンなjQueryプラグインを紹介します。ぜひご覧ください。

 

Tooltipster

Tooltipsterは、シンプルかつ巧妙なjQuery ツールチッププラグインです。HTML対応のツールチップをセマンティックマークアップで表示し、CSSで表示をコントロールすることができます。カスタマイズの幅も広く、様々な機能を備えています。

 

Spectrum

Spectrumは、Webアプリケーションに微妙な色の変化を加えることができる、ダイナミックでカラフルなjQueryプラグインです。jquery.spectrum.jsファイルにあるRGB値を置き換えるだけで、色を変更することができます。

 

SlickNav

SlickNavは、シンプルなマークアップやキーボードからのアクセス、クロスブラウザへの対応、マルチレベルメニューのサポートなど、数々の機能を備えたレスポンシブなモバイルメニューです。

 

Unslider

Unsliderは、最新のあらゆるブラウザでテスト済みの、超小型のjQueryスライダーです。このプラグインは、余分なコードなしでスタイリッシュに高さを変化させます。お好みで、キーボードの矢印サポートを追加することができます。もちろん、レスポンシブにも対応しています。

 

Hover Effect Builder

Hover effect builderは、60種類のエフェクトテンプレートが詰め込まれた、高級なWordPressプラグインです。$22で販売されています。内蔵エディタやSNSでの共有ボタン、2D/3D回転エフェクト、画像アニメーションエフェクト、タイポグラフィー、カスタマイズ可能なショートコード、前景色、背景色などを備えています。

 

jQMeter

jQMeterは軽量なプラグインで、縦・横どちらの向きでもプログレスバー/メーターをアニメーションで表示することができます。ターゲットとなるラッパー要素を作成し、その要素のidをjQMeterメソッドに渡す必要がありますが、それ以外に必須なものはなく、オプションとなっています。

 

Responsive Full Width Tabs

Responsive Full Width Tabsは、タブのアイコンとコンテンツのレイアウトを調整するためのフルワイドタブコンポーネントです。モバイルではアイコンのみを表示し、十分なスペースがあればテキストも表示するということを目的としています。

 

AnimatedModel

AnimatedModelは、CSS3のトランジションを使ってフルスクリーンのモデルを作成するjQueryプラグインです。オリジナルのトランジションを作成することも可能です。必要なことは、ターゲットをカスタマイズし、背景色を選択し、モデルのイン/アウトのトランジションを作成することだけです。

 

Dropzone

Dropzoneは、画像のプレビューや魅力的なプログレスバーを備えた、使いやすいドラッグ&ドロップ型のJavaScriptライブラリです。大容量なファイルや複数のファイル、また同期アップロードをサポートしています。ファイルはAjaxを通じてサーバーにアップロードされます。

 

Scroll Path

Scroll Pathは、コンテンツのスクロールパスを定義できる、シンプルで軽量なプラグインです。パスの描画には canvas 風の構文を使用しています。

 

Gooey Menu

Gooey Menuでは、円をメニューアイテムとして使用しています。このプラグインは$9で販売されており、6種類のメニュースタイル、レスポンシブレイアウト、SVGフィルターを用いたクールなエフェクト、15以上のカスタマイズ可能なオプションなどを備えています。

 

Gridder

Gridder.jsは、Google画像に似たデザインで、サムネイルグリッドの拡大プレビューを表示します。これにより、新しいページをリロードすることなく、より大きな画像を見て、詳細を確認することができます。

 

Mmenu

Mmenuは、WebアプリやWebサイト用のスライド式サブメニューを備えた、オン/オフキャンバスメニューにそっくりなアプリです。設定オプションとアドオンが豊富に用意されています。

 

SimpleFilter

SimpleFilter.jsは、ウェブサイト用の写真フィルターのライブラリを備えたシンプルなプラグインです。8種類のフィルターと6種類のモディファイアから選んで、絶妙な効果を出すことができます。

 

Magnific Popup

Magnific popup は、パフォーマンスとユーザーエクスペリエンスを重視した、高速で軽量なプラグインです。フォームポップアップやAjax ポップアップ、ズームギャラリー、CSS アニメーション付きダイアログ、地図やビデオ付きポップアップなどの機能を備えており、Retina デバイスにも対応しています。

 

Count Everest Countdown

これは、自作のマークアップに統合することができるレスポンシブカウントダウンスクリプトです。このプラグインには12のテーマがあり、$6で購入できます。コールバック機能で拡張可能で、多くのカスタマイズオプションが用意されています。

 

Prism Effect Slider

これは、HTML5 Canvasとレイヤリング技術を使ってプリズム効果のあるスライダーを作成できるユニークなプラグインです。スライダーの前に図形を配置し各スライドの画像を反映させることで、プリズムのような錯覚を起こすことを目的としています。

 

Shifting Material Button Modal

これはArjan JassalがデザインしたShifting Material Button Modal (by Ettrics)です。2つのボタンがあり、ボタンがモデルに展開されると、コンテナの外に置かれた内側のコンテンツが表示される構造になっています。

 

Lettering.js

Lettering.jsは、ラディカルなWebタイポグラフィのための軽量なjQueryプラグインです。このプラグインを用いると1文字ごとに装飾を施すことができ、イベントリスナーやカーニング、カラーなどを文字ごとに細かくコントロールすることができます。

 

Fixed Background Effect

これは、CSSのプロパティ「background attachment」を利用して、固定の背景効果を実現するシンプルなテンプレートです。用意しなければならないものは、同じサイズの異なる画像と、同じ位置にある共通の要素だけです。

 

Google Now Cards

Google Now Cardsは、ユーザーに必要な情報を楽しく表現できるツールです。このjQueryプラグインは、カードを180度回転・平行移動させて裏面を見せることで、素晴らしい効果をもたらします。

 

360° Panoramic Viewer

このプラグインは、複数の画像を組み合わせたものであるパノラマ画像をjQueryを通じて回転させたり、ホットスポットを追加したり、タッチパッドやモバイル、デスクトップのブラウザに統合したりします。また、スマートプリローダーやスライド式のオートスクロール機能も搭載しています。値段は$8です。

 

Loader.css

Loader.cssは、CSSで書かれたローディング・アニメーションのコレクションです。レイアウト計算や高価なペイントを避けるために、各アニメーション要素はCSSプロパティの小さなサブセットに限定されています。

 

jQuery Knob

jQuery Knobは、入力要素をタッチしやすい文字盤に変換してくれます。タッチ、マウス(+マウスホイール)、キーボードのイベントをサポートしている、キャンバスベースのノブ(jpgやpngのスプライトではありません)を備えています。

 

Responsive Tabbed Navigation

Responsive Tabbed Navigationは、モバイルデバイス向けに最適化された便利なタブ型ナビゲーションです。メニューの縦置き、横置きの両方に対応しています。製品ページ、ダッシュボード、ブログなどで使うことができます。

 

Material Design Expanding Overlay

このプラグインは、記事やプロジェクト、プレゼンテーション、製品などを紹介するための拡張オーバーレイに着想を得たマテリアルデザインです。ブロックのインデックス、対応するコンテンツ、ウィンドウの幅を使用して、この拡張オーバーレイ効果を生成します。

おすすめ新着記事

おすすめタグ