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

Post on:2015年6月16日

sponsorsr

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

Quttons -GitHub

Quttonsのデモ
Quttonsの使い方

Quttonsのデモ

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

デモページ

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

デモのアニメーション

Quttonsの使い方

Step 1: 外部ファイル

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

<head>
  ...
  <link rel = "stylesheet" href = "Path/To/Quttons.css" />
</head>
<body>
  ...
  コンテンツ
  ...
  <script src = "Path/To/jQuery" type = "text/javascript"></script>
  <script src = "Path/To/velocity.js" type = "text/javascript"></script>
  <script src = "Path/To/velocity.ui.js" type = "text/javascript"></script>
  <script src = "Path/To/Quttons.js" type = "text/javascript"></script>
</body>

Step 2: HTML

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

<div id="uploadDialog">
    <h2>Upload a new file</h2>
        <input type="text" id = "fileUrl" placeholder = "Enter URL">
    <div id="button_basic_upload">Choose a file to upload</div>
</div>

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

<div class = "qutton" id = "qutton_upload">
 ... クリック後に表示するダイアログボックス ...
</div>

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

<div class = "qutton" id = "qutton_upload">
<div id="uploadDialog">
    <h2>Upload a new file</h2>
        <input type="text" id = "fileUrl" placeholder = "Enter URL">
    <div id="button_basic_upload">Choose a file to upload</div>
</div>
</div>

Step 3: JavaScript

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

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

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