ITエンジニア/デザイナ向けにオープンソースを毎日紹介

WebのUIは基本的に静的で、アニメーションはそれだけ目を引きます。かといって今は簡単にアニメーションが実装できるようになっていますので、ほんの少し揺れた程度ではスルーされてしまうでしょう。

そこでwheelnav.jsの登場です。wheelnav.jsはダイナミックに回転する、目を引くこと間違いなしのライブラリです。

wheelnav.jsの使い方

デモです。マウスオーバーで文字が回転、クリックで円全体が回転します。

メニューに使った場合。アプリではこういうUIがありますよね。

初代iPodっぽいホイールUI。

こんな複雑なUIも可能です。

縦型メニューと組み合わせると格好良さそうです。

wheelnav.jsは回転するナビゲーションUIとなっています。Raphaël.jsを使っており、SVGで描画されています。メニューでの利用が基本のようですが、アイディア次第で色々な場面で使えそうです。

wheelnav.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

wheelnav.js - spinning ever

softwaretailoring/wheelnav

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2