リアルな波紋を画像上で作るjquery.ripples.jsの使い方

2016年4月11日jQuery

指定の画像に水面上の波紋のようなエフェクト効果を付けるjqueryプラグインのripples.jsを使ってみました。

google crhome,IE11,firefoxの主要ブラウザの最新バージョンには対応している模様。iphoneは対応していなかったので、恐らくスマートフォンは対応していません。

ripples.jsの使い方

sirxemic/jquery.ripples · GitHubからファイル一式をダウンロードする。

デモはこちら→jQuery WebGL Ripples

サンプルページを作ってみました。

jQuery WebGL Ripples

コードの記述

jQuery Pluginなので、使用するページにjQueryとripples.jsを読み込ませます。

適用したい要素には必ずCSSでbackground-imageを指定していないと動作しません。(ダジャレジャナイヨ)

次にscriptの記述
ripples()関数にはデフォルトの値が用意されているので、要素を指定するだけでも動作する。

動作をカスタマイズしたい際は、設定値を以下の様に指定する。

resolutionは波紋の広がりの速度
dropRadiusは波紋の大きさ、幅
perturbanceは波紋が生み出すブレ

自動で波紋を生み出すには以下の様に記述する。

setIntervalの記述だけで動作すると思ったが、tryとcatchを記述していなければ動作しなかった。またresolutionの値だけは$el.ripples、dropには渡せない模様。

errorは文字通り、対応していないブラウザやデバイス向けに『Your browser does not support WebGL or the OES_texture_float extension.』といったテキストがdiv.error要素に表示される。

文面を日本語に変更したい場合は、プラグインファイルの577行目if (!supportsWebGL)の中を変更すればいい。

DEMOページのソース

ソースを載せておくのでよければ参考に。

取り扱い注意点

コードを見た所、指定した要素のサイズを取得してcanvasタグのwidth,heightに入れcanvasを書き出している。

背景全体にripplesを使いたい場合は、スクロールの必要が無いページレイアウトにしないと綺麗な波紋が表示されません。あまりに縦幅が長いページ(ブログの記事ページ)等では、背景全体に適用するのは不向きです。

また要素ごとにcanvasを生成するので、複数作りすぎるとかなーり重くなります。これも要注意です。

この記事が気に入ったら
『いいね』しよう!