[JS]これを待ってた!波紋のように広がる美しいエフェクトを簡単に実装できるスクリプト -Waves

Googleが提唱する新UX「Material Design」で採用されている波紋の美しいエフェクトを簡単に実装できるスクリプトを紹介します。

ボタンでもアイコンでもパネル・画像でも簡単に波紋を適用でき、jQueryなど他のスクリプトは不要です。

サイトのキャプチャ

Waves
Waves -GitHub

「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

top of page

©2018 coliss