20 May

リアルな水の波紋が表示できるjquery.ripples

https://github.com/sirxemic/jquery.ripples
http://sirxemic.github.io/jquery.ripples/


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

数値変えると波紋の状態が変わるんだろうけど、よくわかんないのでそのまま。

・注意点
canvasで描写しているので、背景imgがないと反映されません。
つまりbackground-colorだけつけても波紋出ません。
かつての透過gifを利用し、背景imgとして埋めます。そうすると背景未指定のtransparentでも波紋がみえるようになります。