波紋を作るjQueryプラグイン「jQuery Ripples」

こんにちは、ウェブラボ技術メモです。

今回はマウスに合わせて波紋を生み出すjQueryプラグイン「jQuery Ripples」を紹介したいと思います。

まずはDEMO用意致しましたのでご覧下さい。

DEMO

背景画像部分でマウスを動かしたり、クリックするとキレイな波紋が出ますね。

一見難しそうに見えますが簡単に実装することが可能です。

では解説していきます。以下からプラグインをダウンロードしてきてください。

github

まずはjquery本体と一緒にプラグインを読み込ませます。

■HTMLhead内

次にプラグインの設定を行います。

■HTMLhead内 スクリプト部分

あらかじめ波紋をつけたい要素に背景画像を指定しといてください。

■CSS 指定した要素部分

必要な設定は以上です。スクリプト部分の値を調整することによって自分好みの波紋にすることが可能です。

ですが値の調整が難しかったので試行錯誤することになるかもしれません。

DEMO

仕組みとしては、指定要素の後ろにcanvasタグを敷いてそこで波紋を描画しているようです。

対応ブラウザは、主要ブラウザはもちろんのことIEは11から動作しましたので最新のものである必要があります。

同一ページ内で複数個所に導入するとページがかなり重くなるので注意が必要です。

以上、技術メモでした。

  • このページを共有する