スライドショースライドショースライドショー

【2016年最新】jQueryおすすめ便利プラグインまとめ9選!デモ解説付

こんにちは!インストラクターの佐野です。

WEBサイトをあっという間にリッチに仕上げてくれる「jQueryプラグイン」

そんなjQueryプラグインですが、たくさんの種類があって、「いったいどれが使いやすいの?」「最近使われているプラグインは何?」

などとお困りになることがあると思います。

そこで今回は、これさえ押さえておけば大丈夫!という2016年最新版のjQueryおすすめ便利プラグイン9個を機能別にわけてデモ付きご紹介します!

どれも品質が高いものばかりですので、参考にしていいただければ幸いです。

スライドショー編

画像をスライドさせるアニメーションは、近年ではもはや当たり前となっています。

2016年では、ただ単に画像を横にスライドさせるシンプルなもの以外に、「タブ」「リスト」「バナー」などもスライドができる多機能なプラグインが流行ってきそうです!

その中でも厳選して3つご紹介します。

JSSOR

jquery-zoom-slider1

参考サイト

「JSSOR」は、様々なスライド機能が使える高品質なjQueryプラグインです、

画像のスライダーはもちろん、イメージギャラリー、タブスライダー、バナースライダー、リストスライダーなどたくさんのスライダーがあります。

使いたいモノだけ1つずつ個別でダウンロードできて、すべて無料で使えるというのは素晴らしいです。

用途は?

さまざまなスライドショーを使いたい時にぴったりです!

動きも非常になめらかなので、これからスライドの決定版になっていくでしょう。

Zoom Slider

jquery-zoom-slider

参考サイト

こちらのプラグインは、画像の縮小拡大をアニメーションで切り替えることができます

動きも非常になめらかですので、見ていて気持ちいいです。

用途は?

拡大縮小のスライドショーならこれで決まりです!

ECサイトの商品ページなどで使えそうですね!

Pointy Slider

jquery-zoom-slider2

参考サイト

コンテンツを部分的にスライドさせることができます。

用途は?

一部分だけスライドさせるならPointy Sliderがぴったりでしょう。

レスポンシブにも対応しており、シャープなデザインと面白いエフェクトでスライドするので、いろんなサイトで使えそうです!

メニュー編

ナビゲーションメニューや、ドロップダウン、選択ボックスなどのプラグインをご紹介します。

メニューはユーザーが直接操作するので細かい部分にこだわっているプラグインが多数あります。

その中でも特に気になるものを厳選して2つご紹介します!

Dependent Dropdown

jquery-menu-1
jquery-menu-2

参考サイト

「Dependent Dropdown」は、ドロップダウンメニューを選択時に、他のメニューも自動的に切り替えてくれます。

メニュー同士をグループで関連づけることで、セレクトボックス内の要素も切り替えてくれます。

用途は?

ドロップダウンメニューのセレクトを自動で切り替えたいときに使えます!

ユーザーからすると非常に便利な機能ですね!

DateBox

jquery-menu-3

参考サイト

こちらは、「jQueryMobile」・「Bootstrap」・「jQueryUI」と連携するプラグインです。

DatePickerを拡張して、さまざまな日付入力ができるようになります。

用途は?

日付入力全般ならこれで決まりです!

場合に応じてさまざまな使い分けができる優秀なプラグインです。

画面表示編

最近では、レスポンシブ対応が重要視されています。

「モバイルファースト」といわれる現代では、PCやスマホでも最適な画面に自動で調整してくれるプラグインはかなり需要が高いです。

FixedContent.js

jquery-display-2

参考サイト

「FixedContent.js」は、スライドバーやナビゲーションバーなどを画面に固定表示にしてくれるプラグインです。

用途は?

コンテンツを固定表示したい時にかなり有用です!

ユーザーにしてほしいアクションを促す時に使えますね!

スマホユーザーを意識したWEBサイトが作れそうです。

描画編

拡大縮小しても文字や画像がぼやけないSVGはよく使われています。

地図の描画や画像の描画もSVGが増えてきているようです。

SVG描画を利用した優秀なプラグインを厳選してご紹介します!

jQuery Mapael

jquery-display-3

参考サイト

「raphael.js」をもとに作られたベクターでダイレクトに地図を表示できるプラグインです。

クリックした箇所に色をつけることができたり、クリックした箇所のデータをツールチップで表示したりすることができます。

用途は?

地図のSVG描画ならこれでほとんど賄えるでしょう。

他にもいろんな機能があるので、地図を扱うならぜひ使いたいですね!

vivus

jquery-display-4

参考サイト

SVGをアニメーションで描画することができます。

さまざまなアニメーションがあり、自分でカスタムすることもできます。

用途は?

SVGアニメーションならまずこれを使ってみましょう!

SVGを扱うならぜひ使いたいプラグインです!

まとめ

いかがでしたでしょうか?

2016年ではさらに便利で高品質なjQeuryプラグインが使われています!

ぜひ人気のプラグインを使いこなして、リッチなWEBページを作ってみましょう!

LINEで送る
Pocket

書いた人

侍ブログ編集部

侍ブログ編集部

侍エンジニア塾は「人生を変えるプログラミング学習」をコンセンプトに、過去多くのフリーランスエンジニアを輩出したプログラミングスクールです。プログラミングに役立つ情報や有用な情報を発信していきます。
サービスページはこちら
ツイッターはこちら
フェイスブックはこちら