Javascript

Webコンテンツ作成の大きな味方【UI実装系】jsライブラリ10選

今回は、Webコンテンツ作成の大きな味方【UI実装系】jsライブラリをまとめてみました。レイアウト構成からスライダー、モーダル実装などのライブラリをご紹介いたします。

Masonry

【Masonry】は石積み(レンガ調)のレイアウトを作成することができます。
写真を並べるギャラリー系のページで違った見せ方をしたい時とかいいですね。
【IE11対応】【jQueryが必要です】

ダウンロードは以下から
github.com/desandro/masonry
https://www.npmjs.com/package/masonry-layout

MITライセンス

Swiper

【Swiper】はオプションやコールバックなどカスタマイズ性に優れたスライダーです。レスポンシブ対応なのでスマホのタッチ、スワイプなどの実装にも使えます。jQueryに依存しない点も良いですね。
【IE11一部未対応※→ナビが表示されない等】

ダウンロードは以下から
https://github.com/nolimits4web/swiper
https://swiperjs.com/

MITライセンス

slick.js

こちらもカスタマイズの幅が広いjQueryプラグインのスライダーです。
【IE11対応】【jQueryが必要です】

ダウンロードは以下から
https://github.com/kenwheeler/slick/
http://kenwheeler.github.io/slick

MITライセンス

FSVS

【FSVS】は縦型のフルスクリーン型スライダーを実装できるjQUeryプラグインです。
【IE11対応】【jQueryが必要です】

ダウンロードは以下から
https://github.com/lukesnowden/FSVS
https://www.lukesnowden.co.uk/full-screen-vertical-scroll/

MITライセンス

Beer Slider

2枚の画像を比較したい時に使えるjQueryプラグイン【Beer Slider】です。
【IE11対応】【jQueryが必要です】

ダウンロードは以下から
https://github.com/pehaa/beerslider/
https://pepsized.com/beer-slider-responsive-accessible-before-after-slider/

MITライセンス

multiScroll.js

【multiScroll.js】は左右2分割でスライドするjQueryプラグインです。
【IE11対応】【jQueryが必要です】

ダウンロードは以下から
https://github.com/alvarotrigo/multiscroll.js
https://alvarotrigo.com/multiScroll/

MITライセンス

Magnigic Popup

【Magnific Popup】は簡単にモーダルを実装できるjQueryプラグインです。モーダルの種類は、YoutubeやGoogleMap、Ajaxなど種類豊富です。
【IE11対応】【jQueryが必要です】

ダウンロードは以下から
https://github.com/dimsemenov/Magnific-Popup
https://dimsemenov.com/plugins/magnific-popup/

MITライセンス

parallax.js

ジャイロスコープの実装が可能な【parallax.js】PC表示ではよくあパララックスの実装も可能ですが、DEMOサイトのようなマウスムーブで要素を動かしたりする時に使用すると便利です。
【IE11対応】

ダウンロードは以下から
https://github.com/wagerfield/parallax
http://matthew.wagerfield.com/parallax/

MITライセンス

Luxy.js

慣性スクロールとパララックスを実装できるプラグイン【Luxy.js】
スクロール系のパララックスは慣性スクロールとのセットがおすすめです。
【IE11対応】

ダウンロードは以下から
https://github.com/min30327/luxy.js
https://min30327.github.io/luxy.js/

MITライセンス

使い方は以下から
慣性スクロール&パララックスが実装できる!【Luxy.js】を使ってみた

ScrollMagic

【ScrollMagic】はスクロールに合わせて要素を操作できるJavaScriptのライブラリです。【ScrollMagic】単体で使うより、アニメーション系の【TweenMax】などと組み合わせて使用することが多いと思います。
【IE11対応】

ダウンロードは以下から
https://github.com/janpaepke/ScrollMagic
https://scrollmagic.io/

MITライセンス

以下もご参考にください
【ScrollMagic】を使ったスクロール連動アニメーションスニペットまとめ

最後に

今回は、Webコンテンツ作成の大きな味方【UI実装系】jsライブラリをまとめてみました。スライダー系のライブラリとかは使う機会も多いので、一度使うと便利でやめられないですね。