クリックやタッチで波紋が広がる!JavaScriptプラグイン Waves.js の使い方

posts_photo
Waves

今回はクリックやタッチしたところから、水面のように波紋を広げることができるWaves.jsを紹介します。
クラスの追加で簡単に効果を実装できるので、ページのちょっとしたアクセントとしていかがでしょう。

用意するもの

GitHubからプラグイン一式をダウンロードしましょう。
その中から最低限必要なものは以下の通りです。こちらのプラグインはjqueryも必要ありません。

<link rel="stylesheet" href="css/waves.min.css">
<script src="js/waves.min.js" type="text/javascript"></script>

<script type="text/javascript">
//下記の関数を実行することでWaves用のクラスを割り当てた要素に効果を付加します。
Waves.displayEffect();
</script>

基本的な使い方

Wavesは要素に対してクラスを割り当てることで効果を付加します。非常に簡単です。
使用する上で必須なのが”waves-effect”というクラス。これと、何かの組合せによっていくつかの効果を付加していきます。

<p class="waves-effect waves-button">aタグでボタン</p>
<a href="#" class="waves-effect waves-button">aタグでボタン</a>
<button class="waves-effect waves-button">buttonタグでボタン</button>
<input type="submit" class="waves-effect waves-button" value=“inputタグでボタン”>

waves-effectとwaves-buttonだと、いろいろなタグがオーソドックスなボタンになります。

<style>
#block{
  display:block;
  width:200px;
  height:200px;
  border:1px dotted gray;
}
</style>

<div class="waves-effect waves-block" id=“block”>
<p>Block A</p>
</div>

ブロック要素に効果を付けたいときは、waves-effectとwaves-blockを割り当てます。#wrap的な要素に割り当ててしまえばサイト全体で、クリックしたら波紋が広がる仕様になります。

<span class="waves-effect"><img src="img.jpg" height=“300" width=“300”></span>

画像に効果を付けたい場合は、何らかのタグで囲んで、それにwaves-effectをつけるだけでいいっぽいです。

カスタマイズや対応ブラウザについて

waves-buttonの背景色なんかは、普通にクラスを追加しCSSを書くことで実現できます。他にも、波紋の色を変えたいとかもcssの中身を直接いじればできるみたいですね。

ブラウザに関してはモダンブラウザとIE10以上となっています。
気軽に使えるのはもう少し先かもしれませんが、どこかで使ってみたいですねー。

WebクリエイターのためのCreateJSスタイルブック ~JavaScript+HTML5で作るアニメーション/インタラクティブコンテンツ~ (Web Designing Books)
WebクリエイターのためのCreateJSスタイルブック ~JavaScript+HTML5で作るアニメーション/インタラクティブコンテンツ~ (Web Designing Books)