【見るだけで楽しい】イケてるJavaScriptライブラリ26選

## ■はじめに
この記事は、JavaScriptライブラリを
筆者の独断と偏見で選んだものです。

基準はただ1つ。
**イケてるか、イケてないか。**

その為、この記事を見るだけでも面白いと思います。

他にもイケてる面白そうなJavaScriptライブラリがあったら
気軽にコメントしてくれたらとても嬉しいし、筆者が気に入れば追記します！


## ■1.AmplitudeJS
イケてる度：★★★
音楽プレイヤーを作れる。
GitHubスター数：約4,100
![Videotogif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512411/26ecd7c2-ddf7-8259-1fc0-c3403a422d07.gif)

https://521dimensions.com/open-source/amplitudejs

↓ロゴがイケてる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512411/1b0ec3a5-23cd-0953-1756-f49936a412f4.png)



## ■2.Anime.js
イケてる度：★★★
アニメーションを作れる。有名なライブラリ。
公式サイトが見てるだけでオモロイ。
GitHubスター数：約48,800

![download.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512411/789bc93f-e81e-407b-fbc2-3eb0760ae0fe.gif)
![animejs-v3-header-animation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512411/556856aa-c473-d010-eb7e-40f610d91d61.gif)

https://animejs.com/



## ■3.Multiple.js
イケてる度：★☆☆
以下画像のようなオシャレなタイルが作れる。
GitHubスター数：947

![687474703a2f2f6e657874732e6769746875622e696f2f4d756c7469706c652e6a732f646973742f696d616765732f64656d6f2e6a7067.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512411/4d97590b-a7df-2743-b7a7-bc6aee8f6e79.jpeg)

https://multiple.js.org/




## ■4.Three.js
イケてる度：★★★
3Dモデルを作れる。有名なライブラリ。
公式サイトに、実例がたくさん掲載されており、色々と試してみるだけでオモロイ。
GitHubスター数：約99,200

![download.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512411/abf51f59-e0df-78ba-5f5e-5a125b7598d6.gif)

↓ゲームも作れるっぽい。すごい。
![download.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512411/24173fa3-69d0-5be7-f1b1-2b016fde884c.gif)


https://threejs.org/





## ■5.AOS
イケてる度：★★☆
DOMをオシャレに出現させれる。
GitHubスター数：約25,800

![download.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512411/cbf5f8a5-1ed2-220e-7522-2bceeb7d7489.gif)


https://michalsnik.github.io/aos/






## ■6.Granim.js
イケてる度：★★★
キレイなグラデーションを作れる。
ロゴがめっちゃ好き。
GitHubスター数：約5,200

![download.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512411/d1eab0e1-1d3a-e760-63fc-b031775b608e.gif)

https://sarcadass.github.io/granim.js/







## ■7.draggable
イケてる度：★★★
DOMをドラッグ&ドロップで移動できる。
サイトの楽しさ・面白さは筆者的にはNo.1。
GitHubスター数：約17,600

![download.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512411/ece3bad1-a999-7f81-1f7d-a8e0d40a2944.gif)


https://shopify.github.io/draggable/







## ■8.mo.js
イケてる度：★★★
クリックエフェクトや簡易アニメーションを作れる。
GitHubスター数：約18,300

![download.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512411/56cef0ad-afff-53f3-efd6-bd7fd04f169d.gif)
↓ちょっとクリックしてみて。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="pbRejJ" data-user="sol0mka" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sol0mka/pen/pbRejJ">
  Love or Hate?</a> by LegoMushroom (<a href="https://codepen.io/sol0mka">@sol0mka</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

https://mojs.github.io/






## ■9.particles.js
イケてる度：★★★
パーティクルを作れる。
GitHubスター数：約28,400

![download.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512411/41e4c30e-da9b-f923-e870-d473c564e6a1.gif)

https://vincentgarreau.com/particles.js/







## ■10.fullPage.js
イケてる度：★★★
フルページでのスクロールのサイトが作れる。
GitHubスター数：約35,000
![download.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512411/c5d8639e-54b3-a597-e6c0-7691663f87cd.gif)


https://alvarotrigo.com/fullPage/








## ■11.floating-ui
イケてる度：★★☆
ボタン等の位置を特定のDOMと紐づけれる。
GitHubスター数：約28,700
![floating-ui-banner.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512411/6c909d68-0741-e0e3-be79-c32bf30a71ae.png)
![download.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512411/fe4faca1-834c-099a-614f-fbce8c2a9323.gif)

https://floating-ui.com/










## ■12.GSAP
イケてる度：★★★
アニメーションやエフェクトを作れる。
サイトがイケてる。
GitHubスター数：約18,700
![68747470733a2f2f677361702e636f6d2f475341502d73686172652d696d6167652e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512411/bc39174d-6d50-cdaf-c03b-16c012131c15.png)
![download.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512411/02d37919-de62-6525-e45c-5b219aba8ed2.gif)


https://gsap.com/










## ■13.zuck.js
イケてる度：★★★
Instagramのストーリーのような機能が作れる。
サイトがレトロでイケてる。
GitHubスター数：約3,700

![download.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512411/70862666-dd3e-8821-9fde-752f1812f4a1.gif)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512411/764fe584-1e4d-9601-2e46-08aedcd861c6.png)

https://ramon.codes/projects/zuck.js









## ■14.Tippy.js
イケてる度：★★☆
ボタンホバー時のメッセージをサクッと作れる。
GitHubスター数：約11,700

![logo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512411/98e8464a-9fbd-37e0-e8eb-552e31701e08.png)
![download.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512411/647a010e-c1fb-bd78-4f28-06373eb7f72f.gif)

https://atomiks.github.io/tippyjs/









## ■15.Rythm.js
イケてる度：★★☆
ボタンや画像をリズムに合わせて踊らせられる。
GitHubスター数：約3,900
![download.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512411/77fca926-df20-1833-8713-cbe5636c3b30.gif)


https://okazari.github.io/Rythm.js/







## ■16.Rough.js
イケてる度：★★☆
以下画像のような、手書き風の画像を作れる。
GitHubスター数：約19,500

![68747470733a2f2f726f7567686a732e636f6d2f696d616765732f6361705f64656d6f2e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512411/e234ad57-2b99-362d-0118-43408017f473.png)
↓頑張れば手書き風の世界地図も作れるっぽい。
![68747470733a2f2f726f7567686a732e636f6d2f696d616765732f6d362e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512411/1d4143b4-9269-21f9-588d-edd8cd2b5358.png)



https://roughjs.com/






## ■17.iTyped
イケてる度：★★★
タイピング文字アニメーションを作れる。
GitHubスター数：約2,300

![download.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512411/a34f231e-221f-119c-ed3e-1ce1673006d9.gif)

https://ityped.surge.sh/






## ■18.Typed.js
イケてる度：★★☆
タイピング文字を作れる。
GitHubスター数：約14,800
![download.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512411/56c4ce86-3613-249e-e5fe-2a05865e7b74.gif)


https://mattboldt.com/demos/typed-js/






## ■19.jQuery Face Detection
イケてる度：★★☆
顔認識が行える。
GitHubスター数：約2,800

![download.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512411/a7ffad4d-0eee-f7af-5ac1-8b98e631c829.gif)

https://facedetection.jaysalvat.com/





## ■20.sweetalert2
イケてる度：★★★
Webサイトでよく使われるポップアップを作れる。
ロゴ・ライブラリ名がオシャレ。
GitHubスター数：約16,800

![SweetAlert2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512411/92c489f8-8f88-ce5f-3019-bac7cf7b2431.png)


![download.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512411/5d738d03-5a32-22ba-cd5a-b5e3d039df9c.gif)


https://sweetalert2.github.io/




## ■21.react-hot-toast
イケてる度：★★★
トースト通知が作れる。
サイトが可愛い。美味しそうなサイト。
GitHubスター数：約9,200

![download.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512411/f08448be-a05a-86f8-8251-6daf0c248124.gif)


https://react-hot-toast.com/



## ■22.React Spinners
イケてる度：★★★
画面ロード時のグルグルアイコンを作れる。
GitHubスター数：約2,900

![download.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512411/a25654bb-bfcc-7fbb-5a46-b744b3246207.gif)

https://www.davidhu.io/react-spinners/



## ■23.popmotion
イケてる度：★★★
簡易的なアニメーションが作れる。
GitHubスター数：約19,800
![90245722-80926e80-de33-11ea-9c39-ea6c5b344217.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512411/0649b42f-ae59-597e-eb7d-b5647b3ba4ed.png)
![download.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512411/13a836ea-03c4-6d61-b2f2-cd469a1ccfc3.gif)


https://popmotion.io/

https://www.framer.com/motion/







## ■24.vivus.js
イケてる度：★★★
SVGファイルをアニメーションにすることができる。
イカす！
GitHubスター数：約15,100
![download.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512411/ad3ed70a-c304-2194-4101-c4ba58c795ed.gif)



https://maxwellito.github.io/vivus/







## ■25.ScrollReveal
イケてる度：★★★
スクロール位置に合わせて要素を出現させられる。
よく見かけるやつ。
GitHubスター数：約22,100

![download.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512411/a8a2b01f-c2ec-84b7-29f0-f85704f6cdd3.gif)


https://scrollrevealjs.org/






## ■26.Darkmode.js
イケてる度：★★★
ダークモード機能を実装できる。
GitHubスター数：約2,700

![download.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512411/a2f007dd-0003-e934-8888-8fba1c15eed9.gif)



https://darkmodejs.learn.uno/