マテリアルデザインでよく見かける波紋エフェクトを実装できる『jQuery Rippleria』

jQuery Rippleria

jQuery Rippleriaは、マテリアルデザインでよく見かける、ボタンやオブジェクトを押した際の波紋エフェクトを実装できるjQueryプラグインです。

まずは、こちらのサンプルページをご覧ください。

水滴が落ちて、波紋が広がっていくようなエフェクトです。

画像に実装することもできます。こちらは、ホバーカラーをランダムで変更しています。

使い方

サンプルページに実装してみました。

ダウンロードページ上部にある「DONWLOAD.ZIP」からソースコードをダウンロードします。

ZIPファイルを展開したら、cssフォルダに入っている「jquery.rippleria.min.css」と、jsフォルダに入っている「jquery.rippleria.min.js」を使います。

CSS

jquery.rippleria.min.cssを読み込みます。

<link href="css/jquery.rippleria.min.css"/ rel="stylesheet">

buttonのスタイルを用意します。

<style>
/*--------------------
 ボタンのスタイル
--------------------*/
button:focus {
  /*Chromeなどでフォーカス時にアウトラインがつくので0にする*/
  outline: 0;
}
button {
  /*ホバー時のカーソルをリンクカーソルに変更*/
  cursor: pointer;
}

button {
  min-width: 160px;
  border: none;
  border-radius: 5px;
  margin: 1.5rem 0.5rem 0;
  padding: 1.2rem 2.8rem;
  background: #169d82;
  font-size: 1.6rem;
  text-align: center;
  color: #fff;
} 
button:hover {
  background: #12816a;
}

/*--------------------
 画像用のスタイル
--------------------*/
#rippleria {
  display: inline-block;
}
</style>

JS

jQueryとjquery.rippleria.min.jsを読み込みます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="js/jquery.rippleria.min.js"></script>

画像用のスクリプトです。</body>閉じタグより前で、スクリプトを実行します。ホバーカラーをランダムで変更しています。

<script>
$('#rippleria').rippleria({
  // aniamtion speed
  duration: 750,
  // custom easing effect
  easing: 'ease-in'
});

$('#rippleria').click(function(e) {
  e.preventDefault();

  var randInt = function (min, max) {
  var rand = min + Math.random() * (max - min)
  rand = Math.round(rand);
  return rand;
};

$(this).rippleria('changeColor',
  'rgba('+randInt(0,200)+','+randInt(0,200)+','+randInt(0,200)+',0.'+randInt(3,5));
});
</script>
</body>

HTML

<!--ボタン-->
<button data-rippleria class="btn btn-primary">Click me!</button>

<!--ボタン（波紋をカスタマイズ）-->
<button data-rippleria
　 data-rippleria-color="rgba(181,241,39,.35)"
 　data-rippleria-duration="1000"
 　data-rippleria-easing="cubic-bezier(0.680, -0.380, 0.385, 1.650)"
 　class="btn btn-default">Custom</button>

<!--画像-->
<div>
　 <a id="rippleria" href="#">
　　　 <img src="img/photo.jpg">
 　</a>
</div>

以上で、実装は完了です。