波紋模様を再現するjQuery 「Ripples」

波紋の模様のjQueryを探している

浦島です、今回はマウスの動きに合わせて波紋模様を発生させるプラグイン「Ripples」を紹介します。

まずはGithubから必要なファイルをダウンロードまたはフォルダをダウンロード

ダウンロードしたファイルを解凍して「dist」のなかに入っている下記のファイルを使います。

必要なファイルはこれだけ

適当な画像を用意しましょう。
今回はこちらをこちらを用意しました。

必要なファイルはこれだけ
今回は画像に「ocean.jpg」という名前をつけました。

jQueryとプラグインを読み込み

 

スクリプトの書き方

 

最終的なコードはこちら

 

これでマウスで画像上で動かすと波紋が広がります。
以上、波紋模様を再現するjQuery 「Ripples」の紹介でした。

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)