[JS]アニメーションが気持ちいい！サイズ・カラー・形を変えられる紙をメタファにしたボタンを実装できるスクリプト -Quttons
Googleが提唱する「Material Design」は、Webページやアプリなどさまざまなメディアに採用されるようになってきました。そのMaterial Designの中の一つ、サイズやカラーや形を変えることができるデジタルの紙（クァンタムペーパー）をメタファにしたボタンを実装できるスクリプトを紹介します。 デモのアニメーション Quttonsの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプト、jQueryとVelocityを外部ファイルとして記述します。 <head> ... <link rel = "stylesheet" href = "Path/To/Quttons.css" /> </head> <body> ... コンテンツ ... <script src = "Path/To/jQuery" type = "text/javascript"></scr
![[JS]アニメーションが気持ちいい！サイズ・カラー・形を変えられる紙をメタファにしたボタンを実装できるスクリプト -Quttons](https://cdn-ak-scissors.b.st-hatena.com/image/square/732285fae252960d582f0d7d1f3f578a0f23f796/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015061608.gif)
wheelnav.js - 目を引く回転型メニュー MOONGIFT
WebのUIは基本的に静的で、アニメーションはそれだけ目を引きます。かといって今は簡単にアニメーションが実装できるようになっていますので、ほんの少し揺れた程度ではスルーされてしまうでしょう。 そこでwheelnav.jsの登場です。wheelnav.jsはダイナミックに回転する、目を引くこと間違いなしのライブラリです。 wheelnav.jsの使い方 デモです。マウスオーバーで文字が回転、クリックで円全体が回転します。 メニューに使った場合。アプリではこういうUIがありますよね。 初代iPodっぽいホイールUI。 こんな複雑なUIも可能です。 縦型メニューと組み合わせると格好良さそうです。 wheelnav.jsは回転するナビゲーションUIとなっています。Raphaël.jsを使っており、SVGで描画されています。メニューでの利用が基本のようですが、アイディア次第で色々な場面で使えそうです
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
