水面にリアルな波紋を表現する事ができるjQueryプラグイン「jQuery Ripples」!

2016/01/24

こんにちは。
今回は水面にリアルな波紋を表現する事ができるjQueryプラグイン「jQuery Ripples」!です。

WebGLで作られた水面にリアルな波紋を描く事ができるjQueryプラグインを紹介します。
カーソルやクリックにも反応して波紋が広がります。

水面にリアルな波紋を表現する事ができるjQueryプラグイン「jQuery Ripples」!

jQuery Ripples

jquery-ripples

 

jQueryプラグイン「jQuery Ripples」をダウンロードしてみよう!

https://github.com/sirxemic/jquery.ripples/にアクセスして右にある「Download ZIP」のボタンをクリックしてダウンロードします。

 

jQueryプラグイン「jQuery Ripples」を設置してみよう!

html部分を記述します。

 

jQuery本体とjquery.ripples.jsを/bodyの手前に読み込みます。

 

その下に下記のスクリプトを記述します。

 

プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート
プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート

 

いかがでしたか。すごくリアルによくできていますね。
以上で水面にリアルな波紋を表現する事ができるjQueryプラグイン「jQuery Ripples」!でした。

topへ戻る