すぐ使える！波紋のエフェクト「Rippleria.js」

2019年4月22日2024年3月6日

こんにちは。

今日はボタンなどに使えるエフェクト「Rippleria.js」をご紹介します！

サンプルはこちら

公式サイトからデータをダウンロード

公式サイトはこちらです↓
http://nsept.github.io/rippleria/

必要なものは以下2ファイルのみです:
・cssフォルダ内「jquery.rippleria.min.css」
・jsフォルダ内「jquery.rippleria.min.js」

JSファイル・CSSファイルの読み込み

css

<head>
<meta charset="UTF-8">
<title>Rippleria テスト</title>
<link rel="stylesheet" href="css/jquery.rippleria.min.css">　
... 以下省略
</head>

jQuery本体とrippleriaのjsファイルを読み込んだら、あとはアニメーションのスピードやエフェクトの種類を指定します。jsの記述はたったこれだけです！

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="js/jquery.rippleria.min.js"></script>
	
<script>
$('#rippleria').rippleria({
  // aniamtion speed
  duration: 750,
  // custom easing effect
  easing: 'ease-in'
});
</script>

HTMLを記述

ボタンの要素と今回のサンプルでは画像も使用しているので、その2箇所の記述だけです！
*ボタンの見た目を整えるcssの記述などはこちらでは省略しています。

<body>
<div class="wrapper">
	<!--ボタン-->
	<div class="btn_area">
		<button data-rippleria class="btn btn-primary">クリックしてね</button>
	</div>

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