水っぽい動きのjQueryプラグイン3選

ゆたろ

2016.11.15

ゆたろです。どうもです。

皆さんは案件などで「水っぽい動き」を求められたことはありませんか？　ゼロから実装するとかなり時間がかかってしまいますが、プラグインを使えば簡単に実装することができます。

というわけで今回は、水っぽい表現をするプラグインの紹介と、それを使用したsampleソースを紹介していきます。

▼目次

ぷよぷよ動く水玉風 jquery.morphing.js
水たまりの波紋風 jquery.ripples.js
フラットデザインと相性抜群 raindrops.js
まとめ

ぷよぷよ動く水玉風 jquery.morphing.js

jquery.morphing.jsは、要素に対して、ぷよぷよと動く円形のクリッピングマスクを作ってくれるプラグインです。
https://github.com/ANTON072/jquery.morphing.js

html

ダウンロードしたファイル内の、jquery.morphing.jsとjquery.jsを読み込ませます。

--省略--

	<div class="stage">
		<div class="hoge">
			<img src="./img.png" width="1000">
		</div>
	</div>

	<script src="jquery.js"></script>
	<script src="jquery.morphing.js"></script>
	<script src="hoge.js"></script>

--省略--

javascript

hoge.js

$(function(){
	let $hoge = $('.hoge');
	$hoge.morphing({
		numVert: 10,
		spring: 0.005,
		friction: 0.9,
		radius: 200,
		fps: 90
	});
});

jquery.morphing.jsで使えるoption

numVert
spring
friction
radius
fps

水たまりの波紋風 jquery.ripples.js

jquery.ripples.jsは水溜まりに波紋が広がるような表現が作れるプラグインです。
http://sirxemic.github.io/jquery.ripples/

html

jquery.morphing.jsと同様に、ダウンロードしたファイル内のjquery.ripples.jsとjquery.jsを読み込ませます。

--省略--

	<link rel="stylesheet" href="hoge.css">

--省略--

	<div class="stage">
		<div class="hoge"></div>
	</div>

	<script src="jquery.js"></script>
	<script src="jquery.ripples.js"></script>
	<script src="hoge.js"></script>

--省略--

css

hoge.css

--省略--

.hoge{
	width:1000px;
	height:500px;
	background: url('画像のパスを指定してください') #fff;
}

javascript

hoge.js

$(function(){
	let $hoge = $('.hoge');
	$hoge.ripples({
		resolution: 400,
		dropRadius: 25,
		perturbance: 0.05
	});
});

jquery.morphing.jsで使えるoption

imageUrl
dropRadius
perturbance
resolution
interactive
crossOrigin

フラットデザインと相性抜群 raindrops.js

raindrops.jsは横から見た水面に雨が降ってきたような表現ができるプラグインです。
http://daniellaharel.com/raindrops/

html

jquery.ripples.jsはjquery-uiを使ったプラグインなので、jquery.js、jquery-ui.js、raindrops.jsを読み込ませてください。

--省略--

	<link rel="stylesheet" href="hoge.css">

--省略--

	<div class="stage">
		<div class="hoge"></div>
	</div>

	<script src="jquery.js"></script>
	<script src="jquery-ui.js"></script>
	<script src="raindrops.js"></script>
	<script src="hoge.js"></script>

--省略--

css

hoge.css

--省略--

.hoge{
	width:1000px;
	height:500px;
	background: url('画像のパスを指定してください') #fff;
}

javascript

hoge.js

$(function(){
	let $hoge = $('.hoge');
	$hoge.raindrops({
		color:'#fff',
		waveHeight: 200,
		canvasHeight:300,
		rippleSpeed: 0.01,
		rippleSpeed: 0.05, 
		density: 0.04
	});
});

jquery.morphing.jsで使えるoption