ボタン、オブジェクトをクリックした際の波紋エフェクトを実装

se_ka05
se_ka05

jQuery Rippleria

ボタンやオブジェクトを押したときに波紋エフェクトを実装できるjQueryプラグインです。

jQuery Rippleriaを使用して波紋エフェクトを実装していきます。

設定方法

まず、下記リンクから[DONWLOAD.ZIP]をダウンロードしてください。
jQuery Rippleria

ダウンロードしたデータの中で使用するのは「jquery.rippleria.min.css」と「jquery.rippleria.min.js」です。
下記のようにファイルをHTML内で読み込みます。


<link href="css/jquery.rippleria.min.css"/ rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="js/jquery.rippleria.min.js"></script>

HTML

HTMLでボタン、オブジェクトを記述してください。


<!-- ボタン -->
<button data-rippleria class="btn btn-primary">電脳職人村</button>
<!-- ボタン波紋カスタマイズ -->
<button data-rippleria
data-rippleria-color="rgba(100,178,53,.35)"
data-rippleria-duration="1000"
data-rippleria-easing="cubic-bezier(0.680, -0.380, 0.385, 1.650)"
class="btn btn-default">電脳職人村</button>
<!--画像-->
<div>
    <a id="rippleria" href="#">
		<img alt="電脳職人村" src="../img/○○.png">
    </a>
</div>

CSS

ボタン、オブジェクトのスタイルを用意してください。


button:focus {
  outline: 0;
}
button {
  cursor: pointer;
}
button {
	margin: 15px 55px;
	padding: 20px;
	min-width: 220px;
	border: none;
	background: #e01212;
	font-size: 1.6rem;
	text-align: center;
	color: #fff;
}
button.btn.btn-default {
	border: 2px solid #e01212;
	background: #fff;
	color: #000;
}
button:hover {
	background: #f91818;
}
/*--------------------
 画像用
--------------------*/
#rippleria {
	padding: 20px;
	display: inline-block;
	border: 2px solid #000000;
}

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>

これで実装は完了しました。

デモページを用意しましたので、下記リンクよりご覧ください。
デモページ

関連記事