[JS]エフェクトの美しさがスゴイ！Webページを水面にし、波紋を生み出すスクリプト -jQuery Ripple
Post on:2014年11月5日
sponsors
Googleの新UX「Material Design」のアナウンス以降、波紋のエフェクトを数多く紹介してきました。例えばこれとかRiiple Click EffectとかWavesとか。
それらとは一味違い、WebGLでリアルな波紋を描くjQueryのプラグインを紹介します。
↑ファイルサイズを軽減してます。実際はもっと本物の水面です。
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
