jQueryの拡張機能である「プラグイン」を活用して、簡単に魅力的なWebサイトを作成しましょう。jQueryプラグインは、jQueryの公式サイトの他、様々なサイトから配布されています。
目次
1.1. Slidebars
1.2. scotchPanels.js
1.3. Simple jQuery Slider
1.4. FSVS(Full Screen Vertical Scroller)
1.5. Skipper
1.6. Slider Pro
2.1. multiscroll.js
2.2. jQuery Tilted Page Scroll
2.3. gridscrolling.js
2.4. jInvertScroll
2.5. scrollToBySpeed.js
2.6. ScrollMe
3.1. animatedModal.js
3.2. Magnific Popup
4.1. ClockPicker
4.2. jQuery UI Datepicker
4.3. Farbtastic Color Picker
4.4. Responsive-Tabs
4.5. tablesorter
4.6. interface elements
4.7. jquery corner
4.8. Chosen
4.9. jQuery UI Effects Core
1. スライダー
まずは、「スライダー系」のjQueryプラグインをご紹介します。
1.1. Slidebars
【配布URL】https://www.adchsm.com/slidebars/
【GitHub】https://github.com/adchsm/Slidebars
【デモページ】https://www.adchsm.com/slidebars/
【ライセンス】MIT License
Slidebarsは、上下左右からプッシュメニューを表示する事ができるプラグインです
1.2. scotchPanels.js
【配布URL】https://panels.scotch.io/
【GitHub】https://github.com/scotch-io/scotch-panels
【デモページ】https://panels.scotch.io/demos/side-menu-easy-way/index.html
【ライセンス】個人利用：フリー、商用：有料
scotchPanels.jsは、ウィンドウの右や左からメニューパネルが現れるオフキャンバスメニューを実装する事ができるプラグインです。
1.3. Simple jQuery Slider
【配布URL】https://simpleslider.bitlabs.nl/
【GitHub】https://github.com/dirkgroenen/simple-jQuery-slider
【デモページ】https://simpleslider.bitlabs.nl/
【ライセンス】MIT License
Simple jQuery Sliderは、軽量なフルスクリーンスライドを実装する事ができるプラグインです。
1.4. FSVS(Full Screen Vertical Scroller)
【配布URL】https://www.lukesnowden.co.uk/full-screen-vertical-scroll/
【GitHub】https://github.com/lukesnowden/FSVS
【デモページ】https://www.lukesnowden.co.uk/full-screen-vertical-scroll/
FSVSは、垂直方向にスライドするシンプルなスライダーです。
1.5. Skipper
【配布URL】https://austenpayan.github.io/skippr/
【GitHub】https://github.com/austenpayan/skippr
【デモページ】https://austenpayan.github.io/skippr/
【ライセンス】MIT License
Skipperは、シンプルなスライドショー用のプラグインです。
1.6. Slider Pro
【配布URL】https://bqworks.com/slider-pro/
【GitHub】https://github.com/bqworks/slider-pro/
【デモページ】https://bqworks.com/slider-pro/
【ライセンス】MIT License
高機能スライドを実装できるプラグインです。レスポンシブウェブデザインに対応しています。
2. スクロール
「スクロール」系のjQueryプラグインをご紹介します。
2.1. multiscroll.js
【配布URL】https://alvarotrigo.com/multiScroll/
【GitHub】https://github.com/alvarotrigo/multiscroll.js
【デモページ】https://alvarotrigo.com/multiScroll/
【ライセンス】MIT License
multiscroll.jsは、左右分割したウィンドウスクロールを実装する事ができるプラグインです。
2.2. jQuery Tilted Page Scroll
【配布URL】
https://www.thepetedesign.com/demos/tiltedpage_scroll_demo.html
【GitHub】https://github.com/peachananr/tiltedpage_scroll
【デモページ】https://www.thepetedesign.com/demos/tiltedpage_scroll_demo.html
【ライセンス】The GNU GPL
タイトルページが立体的にをスクロールするプラグインです。
2.3. gridscrolling.js
【配布URL】https://mknecht.github.io/gridscrolling.js/
【GitHub】
https://github.com/mknecht/gridｓscrolling.js
【デモページ】https://mknecht.github.io/gridscrolling.js/
【ライセンス】MIT License
gridscrolling.jsは、垂直、水平方向へのスクロールページを作成する事ができるプラグインです。カーソルキーを使って移動ができるのでキー操作が楽です。
2.4. jInvertScroll
【配布URL】https://www.pixxelfactory.net/jInvertScroll/
【GitHub】https://github.com/pixxelfactory/jInvertScroll
【デモページ】https://www.pixxelfactory.net/jInvertScroll/
【ライセンス】MIT License
jInvertScrollは、水平方向にページがスクロールするプラグインです。
2.5. scrollToBySpeed.js
【配布URL】https://ryanburnette.github.io/scroll-to-by-speed/
【GitHub】https://github.com/ryanburnette/scroll-to-by-speed
【デモページ】https://ryanburnette.github.io/scroll-to-by-speed/
【ライセンス】Apache License
scrollToBySpeed.jsは、スクロールのスピードを調節する事ができるプラグインです。
2.6. ScrollMe
【配布URL】https://scrollme.nckprsn.com/
【GitHub】https://github.com/nckprsn/scrollme
【デモページ】https://scrollme.nckprsn.com/
ScrollMeは、スクロール時にシンプルな効果を加える事のできるプラグインです。
3. アニメーション
3.1. animatedModal.js
【配布URL】https://joaopereirawd.github.io/animatedModal.js/
【GitHub】https://github.com/joaopereirawd/animatedModal.js
【デモページ】https://joaopereirawd.github.io/animatedModal.js/
【ライセンス】MIT License
animatedModalは、アニメーションウィンドウを表示する事のできるプラグインです。
3.2. Magnific Popup
【配布URL】https://dimsemenov.com/plugins/magnific-popup/
【GitHub】https://github.com/dimsemenov/Magnific-Popup
【デモページ】https://dimsemenov.com/plugins/magnific-popup/
【ライセンス】MIT License
Magnific Popupは、アニメーションポップアップを実装できるプラグインです。
4. UI
4.1. ClockPicker
【配布URL】https://weareoutman.github.io/clockpicker/
【GitHub】https://github.com/weareoutman/clockpicker
【デモページ】https://weareoutman.github.io/clockpicker/
【ライセンス】MIT License
ClockPickerは、時刻ピッカーを作成する事ができるプラグインです。
4.2. jQuery UI Datepicker
【配布URL】https://plugins.jquery.com/ui.datepicker/
【デモページ】https://jqueryui.com/datepicker/
【ライセンス】MIT License
jQuery UI Datepickerは、日付ピッカーを作成する事ができるプラグインです。
4.3. Farbtastic Color Picker
【配布URL】https://acko.net/blog/farbtastic-jquery-color-picker-plug-in/
【デモページ】https://acko.net/blog/farbtastic-jquery-color-picker-plug-in/
【ライセンス】GPL
Farbtastic Color Pickerは、カラーピッカーを作成する事ができるプラグインです。
4.4. Responsive-Tabs
【配布URL】https://jellekralt.github.io/Responsive-Tabs/
【GitHub】https://github.com/jellekralt/Responsive-Tabs
【デモページ】https://jellekralt.github.io/Responsive-Tabs/
【ライセンス】MIT License
Responsive-Tabsは、レスポンシブタブの作成ができるプラグインです。
4.5. tablesorter
【配布URL】https://mottie.github.io/tablesorter/docs/
【GitHub】https://github.com/Mottie/tablesorter
【デモページ】https://mottie.github.io/tablesorter/docs/
【ライセンス】MIT License/GPL
テーブルソートを実装する事ができるプラグインです。
4.6. interface elements
【配布URL】https://interface.eyecon.ro/
【デモページ】https://interface.eyecon.ro/demos/?page=demos
【ライセンス】MIT License/GPL
interface elementsは、ソートタブ、スライダー、スクロールバー、テキストエリアのリサイズなど様々な機能を追加する事ができるプラグインです。
4.7. jquery corner
【配布URL】https://jquery.malsup.com/corner/
【GitHub】https://github.com/malsup/corner
【デモページ】https://jquery.malsup.com/corner/
【ライセンス】MIT/GPL License
jquery cornerは、色々な角丸を実装する事ができるプラグインです。
4.8. Chosen
【配布URL】https://harvesthq.github.io/chosen/
【GitHub】https://github.com/harvesthq/chosen
【デモページ】https://harvesthq.github.io/chosen/
【ライセンス】MIT License
Chosenは、セレクトボックスをユーザーフレンドリーなインターフェイスに変更するプラグインです。
