Web制作者がチェックしておきたい、気持ちいいインタラクションやUIを実装できるJavaScriptのまとめ

Webサイトやブログに、気持ちいいインタラクションやユーザーインターフェイスを実装できるJavaScriptを紹介します。実用的なものから、あまり見かけない新鮮なものまで、素晴らしいアイデアがいっぱいです！

まずは、不思議なサークル状のUIを備えたスクリプトから。

Zircle UI
Zircle UI -GitHub
デモページ

サークル状のズーム機能を備えたユーザーインターフェイスのライブラリ。最大で9レベルのナビゲーションをズームができ、デスクトップでもスマホでも快適に動作します。
デモにはさまざまなアイデアがあり、UIデザインの刺激になります。

Draggable
Draggable -GitHub
デモページ

デスクトップでもスマホでもドラッグ&ドロップの動作を完全に制御できるスクリプト。基本的なドラッグ操作をはじめ、ソートやスワップなど高速な入れ替えができ、デモではさまざまなドラッグ操作を楽しめます。

Lozad.js -GitHub
デモページ

画像、動画、iframe、広告などのコンテンツをlazy load対応にする高性能なスクリプト。レスポンシブ用の画像や背景画像にも対応しており、Webページのパフォーマンスを向上させます。

Sticky Sidebar
Sticky Sidebar -GitHub
デモページ

今までにない快適動作が気持ちいい、サイドバーを上下スクロールに合わせてぴたっとくっつけるスクリプト。コンテンツが長い・短い場合はもちろん、サイドバーが長くてビューポートをはみ出す場合にも期待通り完璧に対応します。

Gridster.js
Gridster.js -GitHub
デモページ

グリッドにレイアウトした要素を自由にドラッグ&ドロップで移動できるjQueryのプラグイン。要素を動的に追加したり、要素を拡張したり、要素のサイズを変更したり、さまざまなインタラクションが用意されています。

Amplitude.js
Amplitude.js -GitHub
デモページ

jQueryなど、他のライブラリに依存しないHTML5のオーディオプレイヤー。デザインはフルカスタマイズが可能で、プレイリスト・ライブストリームにも対応した高性能です。スマホもサポートしており、タッチデバイスでの操作にも対応しています。

Bubbly Bg -GitHub
デモページ

背景に泡をアニメーションで浮遊させる超軽量スクリプト。
実装も簡単です。

Emergence.js
Emergence.js -GitHub
デモページ

ページをスクロールして、指定した要素がビューポートに表示されたかを判定し、アニメーションなどを適用できる超軽量のスクリプト。ビューポートだけでなく、範囲を指定することもできるので、かなり面白いと思います。

js2flowchart.js -GitHub
デモページ

美しいSVGフローチャートを描くJavaScriptのライブラリ。HTML+CSSだけだとかなりハードルが高いフローチャートも、これだと複雑なフローチャートでも簡単に作成できます。