22 November

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

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でも波紋がみえるようになります。