2020年3月時点でまだ現役なプラグイン。
非常にお世話になっております。
雑いのでもう少しちゃんと書きたい。
jQuery もそこそこ多めです。
▼ ユーティリティー系
bowser.js
- http://lancedikson.github.io/bowser/docs/bowser.js.html
- ブラウザ判定
- [日本語解説] https://co.bsnws.net/article/231
Moment.js
- https://momentjs.com/
- jsは Date がハマるし辛い。ので時間系を扱う時はかなり必須。
- [日本語解説] http://blog.asial.co.jp/1158
date-fns
- https://github.com/date-fns/date-fns
- dateライブラリ Momtent.js よりモダン。使いたい機能だけをモジュール単位でインポートできる。
- [日本語解説] https://co.bsnws.net/article/195
lodash.js
- https://lodash.com/
- 配列やオブジェクトの整形 / イデオム系の実装 / テンプレートエンジン がまとまった軽量ライブラリ
- Underscore.js が使えない案件で使う。
- [日本語解説] https://techblog.kayac.com/2017-12-2_lodash
lodash.js も使えないケースでの参照
→ jQueryで使える配列系便利関数
https://qiita.com/sasaplus1/items/68dcae1eaae018a513e9
30-seconds-of-code
- https://github.com/30-seconds/30-seconds-of-code
- メソッド集。全ての処理が1-数行のコードで書かれている。
- [日本語解説] https://co.bsnws.net/article/273
▼ 機能系
platform.js
- デバイスとかブラウザの判定してくれるライブラリ。
Picturefill.js
- pictureタグのsrcsetポリフィル (IEとAndroid用)
- [日本語解説] https://www.tam-tam.co.jp/tipsnote/javascript/post13513.html
Android 7.x 以降でクロームがデフォルトになったので IE専用か
https://caniuse.com/#search=srcset
imagesLoaded
- https://imagesloaded.desandro.com/
- 画像が読み込まれたイベントを確実に取得する。
CSSのbackground imagesの画像取得タイミングも取れる。 - jQueryプラグイン/ピュアjs どちらもある。
- ライブラリ使わずにゴリゴリにやろうとすると、srcクリアしてjsで付け直すという処理が必要
https://qiita.com/s_s_k/items/b837278c66139c50f174
PACE.js
- 自由度の高いローディングをサクッと作れる。Ajaxとかの非同期通信（SPA）でも使える。
- https://github.hubspot.com/pace/docs/welcome/
- [日本語解説] http://gimmicklog.main.jp/javascript/614/
- [日本語解説] https://minory.org/pace-js.html
fullclip.js (jQuery plugin)
- 画像を縦横画面いっぱいに表示させるプラグイン
- Full Clip - fullscreen body background image jQuery plugin
- https://github.com/bdimitrovski/full_clip
- 複数枚画像のフェードスライドオプションがある。
perfect-scrollbar
- 要素内でスクロールをさせる。スクロールバーのクロスブラウザ対応という意味ではほぼ入れる。デフォルトのUIが綺麗で、タッチデバイス用のオプションが充実している。本当に助かる。
- https://github.com/utatti/perfect-scrollbar/tree/0.8.1
smooth-scroll.js
- 画面内のアンカー移動にアニメーションを追加する。
- https://github.com/cferdinandi/smooth-scroll
- [日本語解説] https://sakic.jp/blog/web/smooth-scroll
▼ スライド
swiper
- http://idangero.us/swiper/
- 非 jQuery
- 3.0系は Flexboxを使用
- [日本語解説] https://www.willstyle.co.jp/blog/724/
slick.js (jQuery plugin)
Infiniteslide.js (jQuery plugin)
- https://wood-roots.com/sample/infiniteslidev2/
- Slick をハックして使うもできるけど、無限に流れ続ける系のスライドはこちらの方が良い。
BeerSlider.js
- https://pepsized.com/beer-slider-responsive-accessible-before-after-slider/
- 画像の差分を操作して見せるスライダー
- [日本語解説] https://coliss.com/articles/build-websites/operation/javascript/responsive-accessible-before-after-slider.html
▼ モーダル
Magnific Popup (jQuery plugin)
- https://dimsemenov.com/plugins/magnific-popup/
- https://dimsemenov.com/plugins/magnific-popup/documentation.html
- [日本語解説] http://mfl.revee.jp/blog/magnific-popup/
### iziModal.js (jQuery plugin)
animatedModal.js (jQuery plugin)
- http://joaopereirawd.github.io/animatedModal.js/
- イン/アウトのアニメーションがオプションでついてる
modal-video.js (jQuery plugin)
- 動画再生だけなら楽。
- React 版もある。
- 動画再生のオプションが豊富
- ロード完了したら流すとかはできない。ラッパー書く必要がある。
vanillabox (jQuery plugin)
fullmod.js (jQuery plugin)
▼ DOMアニメーション / トランジッション
velocity.js
- [日本語解説] http://enum-kabu.com/blog/post-1229/
- [qiita]https://qiita.com/kyota/items/754e0e6cb7a144eda850
anime.js
TweenMax
- https://greensock.com/get-started-js
- 商業利用時のライセンス(http://w3q.jp/t/5996)
有名どころ3つ↑ どれ使う？
lottie (with bodymovin:AE-plugin)
- https://github.com/airbnb/lottie-web
- [日本語解説] http://motida-japan.hatenablog.com/entry/2017/02/19/145537
- AEから json書き出して実行するだけ。マイクロインタラクションとかに最適。
▼ パララックス系 / アニメーショントリガー
マウス操作タイプ
parallax.js
parallax_background.js
- https://lemehovskiy.github.io/parallax-background/
- オプションあって便利そうだけど、読みこむ外部のjs多い感じ。
universal-tilt.js
- ブロック要素をインタラクティブに傾ける。
- https://jb1905.github.io/universal-tilt.js/
- ES6 / jQuery
スクロールタイプ
inview.js (jQuery plugin)
-
https://github.com/protonet/jquery.inview
- 画面に入った時 .on / .one (一回限り)
- 画面から出た時 .off
- ちょっとバギー? / 要素の上下が画面内に出るイベントが取得できるハズだが動かない。
Emergence.js
- https://xtianmiller.github.io/emergence.js/
- 要素が画面に表示されているか判別+操作できる。inview.jsより細かい設定（特定の要素内にいるかの判定も可能）が可能。
wow.js
- http://mynameismatthieu.com/WOW/
- animate.css と よく使われる。（ https://daneden.github.io/animate.css/ )
scrollmagic
- http://scrollmagic.io/
- wow.js もそうだが、イベントのスタートを細かくpx単位でオフセットできるのがいいところでもありつつ、レンポンシブが結構大変。
▼ 画面高さ100％スクロール
fullPage.js (jQuery plugin)
- https://alvarotrigo.com/fullPage/
- [日本語解説] http://cly7796.net/wp/javascript/plugin-fullpage/
- 有料のエクステンションがある。
scrollify.js (jQuery plugin)
▼ 画面遷移
smoothState.js (jQuery plugin)
barba.js
▼ アニメーション / GL
threejs
pixi.js
- http://www.pixijs.com/
- verによってコンソールに出る pixi.js の noticeの消し方が違うので、ドキュメントよく読む。
particles.js
dat.gui
- ジェネる時はパラメータは外出しに。
- https://github.com/dataarts/dat.gui
- [日本語解説] http://webhacck.net/archives/1329221.html
Stats.js
- フォーマンスモニタ。60fps出ているか。
- https://github.com/mrdoob/stats.js
- [日本語] http://tmlife.net/programming/javascript/lasted-stats-js-usage.html
データビジュアライズ系GL
D3.js
DECK.GL
- https://deck.gl （MAP系）
harp.gl
- https://www.harp.gl （MAP系）
mapli.io
- https://www.mapli.io （MAP系）
▼ CSS系
colofilter.css
- http://lukyvj.github.io/colofilter.css/
- CSSカラーフィルタ
animate.css
- https://daneden.github.io/animate.css/
- CSS3 アニメーションライブラリ
- パワポアニメ感があるが、ちょっとしたボタンとかに使うには十分。
▼ その他便利ツール
jquery-qrcode (jQuery plugin)
- http://on-ze.com/archives/6022
- 任意サイズのQR生成。紙で欲しい時も任意サイズ作れるのでいい。
generate-google-calendar-url
- https://github.com/ledsun/generate-google-calendar-url
- http://ledsun.hatenablog.com/entry/2014/11/18/195024
- goolgeカレンダーに追加するコード生成.npm版もある。