リアルな波紋を画像上で作るjquery.ripples.jsの使い方

jQuery

指定の画像に水面上の波紋のようなエフェクト効果を付けるjqueryプラグインのripples.jsを使ってみました。

google crhome,IE11,firefoxの主要ブラウザの最新バージョンには対応している模様。iphoneは対応していなかったので、恐らくスマートフォンは対応していません。

スポンサーリンク

ripples.jsの使い方

sirxemic/jquery.ripples · GitHubからファイル一式をダウンロードする。

デモはこちら→jQuery WebGL Ripples

サンプルページを作ってみました。

jQuery WebGL Ripples

コードの記述

jQuery Pluginなので、使用するページにjQueryとripples.jsを読み込ませます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="./js/jquery.ripples.js"></script>

適用したい要素には必ずCSSでbackground-imageを指定していないと動作しません。(ダジャレジャナイヨ)

body {
	background-image: url(img/bg_3.jpg);
	background-size: cover;
	background-position: 50% 0;
}

次にscriptの記述
ripples()関数にはデフォルトの値が用意されているので、要素を指定するだけでも動作する。

$('.ripples_demo1').ripples();

動作をカスタマイズしたい際は、設定値を以下の様に指定する。

$('.ripples_demo2').ripples({
    resolution: 1024,
    dropRadius: 20,
    perturbance: 0.04,
});
resolutionは波紋の広がりの速度
dropRadiusは波紋の大きさ、幅
perturbanceは波紋が生み出すブレ

自動で波紋を生み出すには以下の様に記述する。

try {
		$('body').ripples({
			resolution: 540,
			interactive: false
		});
	}
	catch (e) {
		$('.error').show().text(e);
	}

	setInterval(function() {
		var $el = $('body');
		var x = Math.random() * $el.outerWidth();
		var y = Math.random() * $el.outerHeight();
		var resolution = 10;
		var dropRadius = 20;
		var strength = 0.01 + Math.random() * 0.05;

		$el.ripples('drop', x, y,  dropRadius, strength);
	}, 3000);

setIntervalの記述だけで動作すると思ったが、tryとcatchを記述していなければ動作しなかった。またresolutionの値だけは$el.ripples、dropには渡せない模様。

errorは文字通り、対応していないブラウザやデバイス向けに『Your browser does not support WebGL or the OES_texture_float extension.』といったテキストがdiv.error要素に表示される。

文面を日本語に変更したい場合は、プラグインファイルの577行目if (!supportsWebGL)の中を変更すればいい。

DEMOページのソース

ソースを載せておくのでよければ参考に。

<!DOCTYPE html>
<html>
<head>
<title>jQuery WebGL Ripples</title>
<style>
* { margin: 0; padding: 0; }
html {
 height: 100%;
}
body {
 color: #fff;
 font-size: 16px;
 background-image: url(img/bg_3.jpg);
 background-size: cover;
 background-position: 50% 0;
 height: 100%;
}
h1 {
 font-size: 32px;
}
.box{
 display: flex;
}
.contents{
 display: inline-block;
 text-align: center;
 color: #000;
 background: rgba(255,255,255,0.5);
 width: 50%;
 margin: 20px auto;
 padding: 20px;
}
.ripples_demo1{
 width:300px;
 height:300px;
 background:url(img/con1.jpg);
 background-size: cover;
 background-position: 50% 0;
 margin:auto;
}
.ripples_demo2{
 width:300px;
 height:300px;
 background:url(img/con2.jpg);
 background-size: cover;
 margin:auto;
}
.ripples_demo3{
 width:300px;
 height:300px;
 background:url(img/con3.jpg);
 background-size: cover;
 margin:auto;
}
.error {
 display: none;
 position: fixed;
 bottom: 0;
 left: 0;
 background: #000;
 color: #f00;
 padding: 5px;
 max-width: 50%;
}
</style>
</head>
<body>
<div class="box">
 <article class="contents">
 <h1>RipplesのDEMOその1</h1>
 <div class="ripples_demo1"></div>
 </article>
 <article class="contents">
 <h1>RipplesのDEMOその2</h1>
 <div class="ripples_demo2"></div>
 </article>
 <article class="contents">
 <h1>RipplesのDEMOその3</h1>
 <div class="ripples_demo3"></div>
 </article>
</div>
<div class="error"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="js/jquery.ripples.js"></script>
<script>
$(document).ready(function() {
 
 try {
 $('body').ripples({
 resolution: 540,
 interactive: false
 });
 }
 catch (e) {
 $('.error').show().text(e);
 }
 setInterval(function() {
 var $el = $('body');
 var x = Math.random() * $el.outerWidth();
 var y = Math.random() * $el.outerHeight();
 var resolution = 10;
 var dropRadius = 20;
 var strength = 0.01 + Math.random() * 0.05;
 $el.ripples('drop', x, y, dropRadius, strength);
 }, 3000);
// demo1
$('.ripples_demo1').ripples();
//demo2
$('.ripples_demo2').ripples({
 resolution: 1024,
 dropRadius: 20,
 perturbance: 0.04,
});
//demo3
$('.ripples_demo3').ripples({
 resolution: 200,
 dropRadius: 50,
 perturbance: 0.04,
});
});
</script>
</body>
</html>

取り扱い注意点

コードを見た所、指定した要素のサイズを取得してcanvasタグのwidth,heightに入れcanvasを書き出している。

背景全体にripplesを使いたい場合は、スクロールの必要が無いページレイアウトにしないと綺麗な波紋が表示されません。あまりに縦幅が長いページ(ブログの記事ページ)等では、背景全体に適用するのは不向きです。

また要素ごとにcanvasを生成するので、複数作りすぎるとかなーり重くなります。これも要注意です。

この記事が気に入ったら
『いいね』しよう!