これからはボタンのhoverで色を変えるだけじゃダメ？波紋のエフェクトをGoogleが推奨

最終更新日: 2016/06/16

Googleの提唱するデザインの指針「Material Design」でアニメーションについての記述が興味深いです。
この中の一つに波紋のアニメーションでクリック（タップ)時の反応を表現することについて記載されています。

クリック（タップ）で波紋のアニメーションは、確かにユーザーの操作に対する反応をアニメーション表現する上で、確かにわかりやすくて良い表現だと思います。

以下にデモを用意しましたので触ってみてください。
ボタンをクリックした時のアニメーションに注目です。

デモ

これをCSS3でアニメーション作るのはちょっと手間ですよね。
便利なjavascriptのライブラリがありますので紹介します。

Waves

Wavesの使い方

使い方はメチャ簡単です。CSSとjsファイルを読み込み、対象のボタンや画像にClassを追加するだけです。

外部ファイルの読み込み
スタイルシートとjavascriptの読み込みを記述します。

<!DOCTYPE html><html>
    <head>
        <title>Waves example</title>

        <link rel="stylesheet" type="text/css" href="/path/to/waves.min.css" />

    </head>
    <body>
        <a href="#" class="waves-effect waves-button">Click Here</a>

        <script type="text/javascript" src="/path/to/waves.min.js"></script>
        <script type="text/javascript">
            Waves.displayEffect();
        </script>
    </body>
</html>

HTMLの記述
上記のサンプルの例です。、a要素、button要素、input要素などにclassを加えるだけで実装できます。

<button class="waves-effect waves-button">Click Here</button>
<!-- It also support a, input submit and input button tag -->
<a href="#" class="waves-effect waves-button">A Tag</a>
<input type="submit" class="waves-effect waves-button" value="Input Submit">
<input type="button" class="waves-effect waves-button" value="Input Button">

個人的にはこの表現方法は好きです。スマホユーザーには優しいUIだと思います。スマホサイトでは積極的に取り入れてみたいですね。

sounansa.net