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

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

Masonry

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

ダウンロードは以下から

github.com

GitHub - desandro/masonry: :love_hotel: Cascading grid layout plugin

:love_hotel: Cascading grid layout plugin. Contribute to desandro/masonry development by creating an account on GitHub.

www.npmjs.com

masonry-layout - npm

Cascading grid layout library. Latest version: 4.2.2, last published: 6 years ago. Start using masonry-layout in your project by running `npm i masonry-layout`. There are 198 other projects in the npm registry using masonry-layout.

MITライセンス

Swiper

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

ダウンロードは以下から

github.com

GitHub - nolimits4web/swiper: Most modern mobile touch slider with hardware accelerated transitions

Most modern mobile touch slider with hardware accelerated transitions - nolimits4web/swiper

swiperjs.com

Swiper - The Most Modern Mobile Touch Slider

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

MITライセンス

slick.js

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

ダウンロードは以下から

github.com

GitHub - kenwheeler/slick: the last carousel you'll ever need

the last carousel you'll ever need. Contribute to kenwheeler/slick development by creating an account on GitHub.

kenwheeler.github.io

slick - the last carousel you'll ever need

slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!

MITライセンス

FSVS

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

ダウンロードは以下から

github.com

GitHub - lukesnowden/FSVS: Full Screen Vertical Scroll

Full Screen Vertical Scroll. Contribute to lukesnowden/FSVS development by creating an account on GitHub.

www.lukesnowden.co.uk

Full Screen Vertical Scroller | CSS3 | jQuery | Luke Snowden

MITライセンス

Beer Slider

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

ダウンロードは以下から

github.com

GitHub - pehaa/beerslider: A vanilla JS keyboard accessible plugin for any before-after comparison

A vanilla JS keyboard accessible plugin for any before-after comparison - pehaa/beerslider

MITライセンス

multiScroll.js

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

ダウンロードは以下から

github.com

GitHub - alvarotrigo/multiscroll.js: multiscroll plugin by Alvaro Trigo. Create scrolling split websites. http://alvarotrigo.com/multiScroll/

multiscroll plugin by Alvaro Trigo. Create scrolling split websites. http://alvarotrigo.com/multiScroll/ - alvarotrigo/multiscroll.js

alvarotrigo.com

multiscroll.js - split multi-scrolling pages plugin

MITライセンス

Magnigic Popup

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

ダウンロードは以下から

github.com

GitHub - dimsemenov/Magnific-Popup: Light and responsive lightbox script with focus on performance.

Light and responsive lightbox script with focus on performance. - dimsemenov/Magnific-Popup

dimsemenov.com

Magnific Popup: Responsive jQuery Lightbox Plugin

Light and open source responsive lightbox plugin with focus on performance, for jQuery and Zepto.js. High-DPI (retina) display support, fast tap for touch devices.

MITライセンス

parallax.js

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

github.com

GitHub - wagerfield/parallax: Parallax Engine that reacts to the orientation of a smart device

Parallax Engine that reacts to the orientation of a smart device - wagerfield/parallax

matthew.wagerfield.com

parallax.js

Simple, lightweight Parallax Engine that reacts to the orientation of a smart device

MITライセンス

Luxy.js

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

ダウンロードは以下から

github.com

GitHub - min30327/luxy.js: Inertia scroll and parallax effect plugin in Vanilla.js

Inertia scroll and parallax effect plugin in Vanilla.js - min30327/luxy.js

min30327.github.io

Luxy.js｜Inertia scroll and parallax effect plugin in Vanilla.js

MITライセンス

使い方は以下から

ScrollMagic

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

ダウンロードは以下から

github.com

GitHub - janpaepke/ScrollMagic: The javascript library for magical scroll interactions.

The javascript library for magical scroll interactions. - janpaepke/ScrollMagic

scrollmagic.io

ScrollMagic ♥ Demo

The javascript library for magical scroll interactions. ScrollMagic helps you to easily react to the user's current scroll position.

MITライセンス

以下もご参考にください

hibi-update.org

Redirecting to: https://hibi-update.org/blog/scrollmagic/

最後に

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