今回は、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】は左右２分割でスライドする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ライブラリをまとめてみました。スライダー系のライブラリとかは使う機会も多いので、一度使うと便利でやめられないですね。
