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

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

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

デモのアニメーション

jQuery Ripples Plugin -GitHub

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

jQuery Rippleのデモ

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

デモのキャプチャ

デモページ

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

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

デモのキャプチャ

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

jQuery Rippleの使い方

Step 1: 外部ファイル

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

<body>
  ...
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  <script src="js/jquery.ripples.js"></script>
</body>

Step 2: HTML

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

<div class="box">コンテンツ</div>

Step 3: JavaScript

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

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

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

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

sponsors

top of page

©2018 coliss