【ジャンル別】JavaScript(jQuery)おすすめプラグインのまとめ
スライダーやポップアップなどを手軽に実装できるJavaScript、またはjQueryのプラグインをまとめました。
スライダー・カルーセル系
スライダーの定番 - Swiper
特に理由がなければ、スライダーはSwiperを使えば間違いないでしょう。
(jQuery 不要)
アクセシビリティ対応のスライダー - Splide
アクセシビリティに対応したスライダー。個人的にお気に入り。
Swiperだとサムネイル付きスライダーを実装する時にタップした時の反応が悪いのですが、このプラグインだとそこも解消できるのでとってもいい感じのプラグインだと思っています。
(jQuery 不要)
カレンダー系
軽量・シンプル・使いやすい - pickadate.js
https://amsul.ca/pickadate.js/
軽量のカレンダーライブラリ。
有名な jQuery Datepicker より使いやすいです。
ポップアップ系
優れたアクセシビリティのプラグイン - Micromodal.js
https://micromodal.vercel.app/
Webアクセビリティ(A11Y)に対応したjQuery不要のプラグインです。
解説記事:【Vanilla JS】軽量かつシンプルなモーダルプラグイン『Micromodal.js』
(jQuery 不要)
YouTubeやVimeoにも対応 - Lity
通常の画像以外にも、iframe動画のYouTubeやVimeoも一瞬でポップアップできます。
(jQuery 必要)
スクロールアニメーション系
自分でCSSでアニメーションを作りたい時におすすめ - ScrollTrigger
https://terwanerik.github.io/ScrollTrigger/
スクロールしたら任意のクラスを付けてくれるので、自分で細かくアニメーションをCSSで作りたい場合はこのプラグインがおすすめです。
(jQuery 不要)
プラグイン側でアニメーションを設定したい時におすすめ - ScrollTrigger(GSAP)
https://www.to-r.net/media/scrolltrigger/
こちらのプラグインは、要素をスクロールに応じて表示する際の移動距離や拡大縮小などをプラグイン側で設定できます。
「CSSでわざわざ設定したくはないけど動きは付けたい」時におすすめです。
(jQuery 不要)
横方向への無限ループアニメーション
超お手軽 - Infiniteslide.js v2
https://github.com/woodroots/infiniteslidev2#ja
(jQuery 必要)
CSSでの無限横ループの方法の解説記事もよく見かけますが、自分の場合はそれだとうまくいきませんでした(微妙に隙間が空いたりなど...)。もし同じように、CSSでうまくいかないという方はこちらのプラグインを試してみてください。
実装時の注意点がひとつだけあって、横並びにする親要素にはflexなどのスタイルは自身で付けないでください。横並びにするスタイルなども全部プラグイン側でよしなに対応してくれます。