水面の波紋を実装するためのjqueryプラグイン【jQuery Ripples】

webデザイナーの平尾誠です。

水面のように水が揺れているようにするJquery のプラグイン、【jQuery Ripples】を紹介します。

これ系のwebGLは開くだけでPCからプシューって音がなる。
とかく、新しいプラグインでもないのですが、なかなか軽量だったし、カンタンに見栄えが変わるので、覚えておきたい。

そんな自分の為のエントリーとなっております。

紹介するのはこれ。

【jQuery Ripples】

水面の波紋を実装するためのjqueryプラグイン【jQuery Ripples】

マウスの軌跡に波紋を作ります。

jQuery Ripplesの使い方

使い方は簡単です。

まずはjqueryを読み込んで、準備します。

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

そして命令文はこれだけ。

$(document).ready(function() {
$(selector).ripples();
});

ここまでは本家のサイトにも載ってるし、他にもオプションがあるので調べて勝手に作ってほしい。(強気)

自動で雨を降らせる設定

デフォルトの設定では、マウスが指定した要素に載らないと水面の波紋は現れません。
なので、速攻でスクロールされたら見られることない悲しい。。

そこで、はじめから水面が動いているように雨を降らせます。

	// Automatic drops
			setInterval(function() {
				var $el = $('.mv-first');
				var x = Math.random() * $el.outerWidth();
				var y = Math.random() * $el.outerHeight();
				var dropRadius = 10;
				var strength = 0.04 + Math.random() * 0.04;

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

こんな感じです。

簡単でした。
時間ごとに雨を降らせるって感じの命令文になっています。

これでカンタンに水面のような動きを実装することができました。

ほなね