[JS]これを待ってた！波紋のように広がる美しいエフェクトを簡単に実装できるスクリプト -Waves
Post on:2014年7月23日
sponsors
Googleが提唱する新UX「Material Design」で採用されている波紋の美しいエフェクトを簡単に実装できるスクリプトを紹介します。
ボタンでもアイコンでもパネル・画像でも簡単に波紋を適用でき、jQueryなど他のスクリプトは不要です。
「Material Design」が気になる方は、前の記事（「波紋」のアニメーションを実装するテクニック）で動画を紹介しているので参考にしてみてください。
Wavesのデモ
デモはChrome, Safari, Firefox, Operaなどのモダンブラウザ、IEは10+でご覧ください。
以下、デモをアニメーションgifにしてみました。
それぞれクリック・タップした地点を中心にエフェクトが波紋状に広がり、フェードで消えます。
デモ：フラットのボタン、フロートのボタン
デモ：アイコン、サークル付きのアイコン
デモ：divのパネル、画像
パネルや画像などは大きいので、クリックした地点から波紋が広がっているのがよく分かると思います。
Wavesの使い方
Step 1: 外部ファイルとJavaScript
当スタイルシートとスクリプトを外部ファイルとして記述し、スクリプトを実行します。
※jQueryなど他のスクリプトやスタイルシートは必要はありません。
<head>
...
<link rel="stylesheet" type="text/css" href="/path/to/waves.min.css" />
</head>
<body>
<script type="text/javascript" src="/path/to/waves.min.js"></script>
<script type="text/javascript">
Waves.displayEffect();
</script>
</body>
Step 2: HTML
デモの一番目にあるボタンは、a要素、button要素、input要素などにclassを加えるだけで実装できます。
<a href="#" class="waves-effect waves-button">Click Here</a> <button class="waves-effect waves-button">Click Here</button> <input type="submit" class="waves-effect waves-button" value="Input Submit">
パネルを実装するdiv要素などのブロック要素には「.waves-block」を与え、画像はエフェクト用にspanなどで内包します。
<div class="waves-effect waves-block"> Block A </div> <span class="waves-effect"> <img src="/path/to/images.jpg"> </span>
Step 3: 波紋のスタイルの変更
波紋のカラーはデフォルトで暗めに設定されています。明るいカラーを使いたい時は「.waves-light」を指定し、オリジナルのカラーで背景を指定します。
<style>
.blue-button {
background: #01BCFF;
color: #FFF;
}
</style>
<span class="waves-effect waves-button waves-light blue-button">
<button>Button B</button>
</span>
sponsors
