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);
こんな感じです。
簡単でした。
時間ごとに雨を降らせるって感じの命令文になっています。
これでカンタンに水面のような動きを実装することができました。
ほなね
