波紋の模様のjQueryを探している
浦島です、今回はマウスの動きに合わせて波紋模様を発生させるプラグイン「Ripples」を紹介します。
まずはGithubから必要なファイルをダウンロードまたはフォルダをダウンロード
ダウンロードしたファイルを解凍して「dist」のなかに入っている下記のファイルを使います。
必要なファイルはこれだけ
適当な画像を用意しましょう。
今回はこちらをこちらを用意しました。
必要なファイルはこれだけ
今回は画像に「ocean.jpg」という名前をつけました。
jQueryとプラグインを読み込み
|
1 2 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="jquery.ripples-min.js"></script> |
スクリプトの書き方
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function () { $(idまたはclassを入力).ripples({ //波紋をつけたい要素の指定 resolution: 512, //波紋の広がりの速度（値が大きいほど遅くなる） dropRadius: 20, //波紋の大きさ（値が大きいほどでかくなる） perturbance: 0.01 //波紋による屈折量（値が大きいほどブレる） }); }); </script> |
最終的なコードはこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>test</title> <style> .ocean { background-image: url("ocean.jpg"); height: 100vh; width: 100%; background-size: cover; background-position: center; } </style> </head> <body> <div class="ocean"> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="jquery.ripples-min.js"></script> <script> $(document).ready(function () { $('.ocean').ripples({ //波紋をつけたい要素の指定 resolution: 512, //波紋の広がりの速度（値が大きいほど遅くなる） dropRadius: 20, //波紋の大きさ（値が大きいほどでかくなる） perturbance: 0.01 //波紋による屈折量（値が大きいほどブレる） }); }); </script> </body> </html> |
これでマウスで画像上で動かすと波紋が広がります。
以上、波紋模様を再現するjQuery 「Ripples」の紹介でした。
Follow me!
