今回はクリックやタッチしたところから、水面のように波紋を広げることができる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)
