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

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

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

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

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

紹介するのはこれ。

【jQuery Ripples】

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

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

jQuery Ripplesの使い方

使い方は簡単です。

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

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

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

自動で雨を降らせる設定

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

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

こんな感じです。

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

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

ほなね