[JS]アニメーションが気持ちいい！サイズ・カラー・形を変えられる紙をメタファにしたボタンを実装できるスクリプト -Quttons

Googleが提唱する「Material Design」は、Webページやアプリなどさまざまなメディアに採用されるようになってきました。そのMaterial Designの中の一つ、サイズやカラーや形を変えることができるデジタルの紙（クァンタムペーパー）をメタファにしたボタンを実装できるスクリプトを紹介します。

Quttons -GitHub

• Quttonsのデモ
• Quttonsの使い方

Quttonsのデモ

デモでは、3種類のボタンが用意されています。

デモページ

紙の上にはファイルのアップロード、アラート、確認ダイアログなど、さまざまなコンテンツを配置できます。

デモのアニメーション

Quttonsの使い方

Step 1: 外部ファイル

当スタイルシートとスクリプト、jQueryとVelocityを外部ファイルとして記述します。

[html]

...

...
コンテンツ
...





[/html]

Step 2: HTML

まずは、クリック後のダイアログボックスを実装します。
idを付与したdiv要素の中に、コンテンツを自由に配置できます。ボックスを閉じるボタンを加える時は「.close」を与えます。

[html]

[/html]

クリック後に表示するダイアログボックスをdiv要素で内包します。

[html]

[/html]

上のダイアログボックスを使用すると、下記のようになります。

[html]

[/html]

Step 3: JavaScript

ボタンはスクリプトで配置します。
ボタンに使うアイコンと背景カラーを指定し、スクリプトを実行します。

[javascript]
var quttonUpload = Qutton.getInstance($('#qutton_upload'));
quttonUpload.init({
icon : './images/icon_upload.png',
backgroundColor : "#917466"
});
[/javascript]

オプションで、ボタンの幅や高さ・アニメーションの種類などを指定できます。