[JS]エフェクトの美しさがスゴイ！Webページを水面にし、波紋を生み出すスクリプト -jQuery Ripple

Googleの新UX「Material Design」のアナウンス以降、波紋のエフェクトを数多く紹介してきました。例えばこれとかRiiple Click EffectとかWavesとか。

それらとは一味違い、WebGLでリアルな波紋を描くjQueryのプラグインを紹介します。

jQuery Ripples Plugin -GitHub

↑ファイルサイズを軽減してます。実際はもっと本物の水面です。

• jQuery Rippleのデモ
• jQuery Rippleの使い方

jQuery Rippleのデモ

デモはChrome, Safari, Firefox, Opera, IEは11+で、OpenGL 2.0対応のビデオカード内蔵のPCでご覧ください。

デモページ

カーソルを動かしたり、クリックすると、水面と波紋の動きを楽しめます。

波紋は適用する範囲を設定することができ、デモではページ全体が指定されています。

ページ上をクリックすると、そこから波紋がどんどん増えます。

jQuery Rippleの使い方

Step 1: 外部ファイル

当スクリプトとjquery.jsを外部ファイルとして記述します。

[html]

...



[/html]

Step 2: HTML

HTMLは波紋を適用したい場所を指定できるよう実装します。

[html]

[/html]

Step 3: JavaScript

jQueryのセレクタで適用する場所を指定し、スクリプトを設定します。

[javascript]
$('.box').ripples({
resolution: 512,
dropRadius: 20,
perturbance: 0.04,
});
[/javascript]

ページ全体に適用したい時は、bodyを指定します。

[javascript]
$('body').ripples({
resolution: 512,
dropRadius: 20,
perturbance: 0.04,
});
[/javascript]