クリックするとウェーブみたいな効果を与えられるJavaScript「Waves」

クリック時に効果を与えることでアクションが起きたことを明示できます。
Wavesを使用するとクリックした場所から要素全体にまるでウェーブが生じたような効果を洗えることができます。

sponsors

使用方法

Wavesからファイル一式をダウンロード。

<link rel="stylesheet" type="text/css" href="waves.min.css" />
  <script type="text/javascript" src="waves.js"></script>
  <script type="text/javascript">
       Waves.displayEffect();
  </script>
  
あとは上記より上にウェーブさせたい要素を記述していきます。
aタグはもちろんinput、divにも対応しています。

<a href="#" class="waves-effect waves-button">Click Here</a>
  <input type="submit" class="waves-effect waves-button" value="Input Submit">
  <div class="waves-effect waves-block" style="background: #ff4f0f;color:#fff;">
    Block A
</div>
  
基本的にはwaves-effectと要素に適したclassをふれば完成です。
ボタン: waves-button、ブロック要素:waves-block

サンプル

Click Here
Block A

Javascriptサンプルページ一覧
skuare.net

sponsors