[jQuery] クリックしたところから波紋が広がるプラグイン！

Rippler

以前にも波紋のプラグインを紹介しましたが、今回も新たなプラグインを紹介します。

• [jQuery] クリック時に波紋のような効果をつける

今回紹介するRipplerは、Bootstrapのボタンにも効果をつける事ができます。

早速導入方法からいってみましょう。

導入方法

まずは、jQueryやプラグインの関連ファイルの読み込みです。
Bootstrapが必要な方は、それも読み込みましょう。
今回は、Bootstrapも記述しておきます。

<!-- bootstarp上のボタンで使いたい場合は、bootstrapを読み込みます -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- ripplerのCSSファイル -->
<link rel="stylesheet" href="任意のファイルパス/rippler.min.css">
<!-- jQuery（Google上のものを読み込んでもいいし、ローカルに落として任意のファイルパスで読み込んでもいい） -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- rippler js -->
<script src="任意のファイルパス/jquery.rippler.min.js"></script>

これで必要なファイルは読み込みました。

続いてHTMLのマークアップです。

<button class="btn btn-primary rippler rippler-default" href="#">bootstrap button</button>

このように、クラスをつけていきます。

最後に、実行文を追加します。

$(document).ready(function() {
  $(".rippler").rippler({
    effectClass      :  'rippler-effect'
    ,effectSize      :  16      // Default size (width & height)
    ,addElement      :  'div'   // e.g. 'svg'(feature)
    ,duration        :  400
  });
}); 

これで完成です。

サポートしているブラウザは、IE10〜、Chrome、Safari、Firefoxです。

まとめ

最近は、スマホ事情もあってか、クリッカブルなものにタッチしたと認識させるために波紋系のjsが増えてきています。
ユーザーのことを考えているのでとてもいいと思います。
逆に、こういうjsを追加する事によってサイトが重くなる事は避けたいですね。