今回は波紋エフェクトプラグイン「jquery.ripples」をご紹介します。
「jquery.ripples」は画像を水面のようにして、マウスホバーやクリックに合わせ波紋が広がるようなエフェクトをかけるプラグインです。
DEMOはこちら
（スマホには基本対応していませんのでお気を付けください。※当方のiOSではクリックだけは反応しました。）
jquery.ripplesの使い方
jquery.ripplesの使い方についてご説明します。
HTML
まずbody内に画像を表示させる場所を用意してあげます。
|
1 2 3 4 5 |
<body> <div id="demo"></div> </body> |
div要素のidにdemoと名付けました。
CSS
要素のbackgroundに波紋エフェクトをかけたい画像を指定します。
この時忘れずに要素自体のサイズも指定してあげましょう。
（backgroundなのでサイズを確保しないと描画されません。）
|
1 2 3 4 5 6 7 |
<style> #demo{ background: url("demo.png") center center/cover no-repeat; width: 100%; height: 100vh; } </style> |
今回は画面いっぱいに画像を表示させました。
js
続いて公式GitHubから、プラグインをダウンロードしてきて解凍します。
公式GitHub
使うのは「jquery.ripples-min.js」です。
jquery.js本体と一緒に読み込みます。
|
1 2 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="jquery.ripples-min.js"></script> |
その後で、要素にjquery.ripplesを設定するscriptを書きます。
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function() { $('#demo').ripples({ //波紋をつける要素を指定 resolution: 300, //波紋が広がる速さ dropRadius: 20, //波紋の大きさ perturbance: 0.01 //波紋の揺れの量 }); }); </script> |
これで動くはずです。
Chromeブラウザのローカルプレビューだと、何故か波紋が控えめになる不具合がありましたので、
波紋の大きさなどの調整を行う際は、他のブラウザでも確認してみてください。
ちなみにbackgroundに複数画像を設定すると表示がおかしくなりますので、
:before、:after疑似要素を使って指定を分けるなど、background画像は1要素に1枚にしましょう。
コードまとめ
|
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 40 41 42 43 44 45 46 47 48 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <!-- disable iPhone inital scale --> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <title>DEMO「jquery.ripples」</title> <!-- Keyword,Description --> <meta name="keywords" content=""> <meta name="description" content=""> <!-- JQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="jquery.ripples-min.js"></script> <script> $(document).ready(function() { $('#demo').ripples({ //波紋をつける要素を指定 resolution: 300, //波紋が広がる速さ dropRadius: 20, //波紋の大きさ perturbance: 0.01 //波紋の揺れの量 }); }); </script> <style> body{ margin: 0; padding: 0; } #demo{ background: url("demo.png") center center/cover no-repeat; width: 100%; height: 100vh; } </style> </head> <body> <div id="demo"></div> </body> </html> |
カスタマイズ
オプションをいじってみます。
速度を速く、波紋は小さく、揺れの量を大きく、変更してみました。
|
1 2 3 |
resolution: 1000, //波紋が広がる速さ dropRadius: 1, //波紋の大きさ perturbance: 0.1 //波紋の揺れの量 |
オプションDEMO
小雨が降ったような波紋になりました。
工夫次第で様々な演出が出来ると思います。色々試してみてください。
まとめ
上手くできたでしょうか？
揺れる水面は癒し効果がありますね。ずっと眺めていたくなります。
このプラグインを効果的に使えばワンランクおしゃれなサイトが出来そうです。
手軽に実装できるので積極的に使っていきたいものです。
![群馬の法人ITサポートサービス Wide Net[ワイドネット]](https://www.nedia.ne.jp/wp-content/themes/nedia/images/bnr_bt_widenet02.png "群馬の法人ITサポートサービス Wide Net[ワイドネット]")
![群馬の法人ITサポートサービス Wide Net[ワイドネット]](https://www.nedia.ne.jp/wp-content/themes/nedia/images/bnr_bt_widenet03.png "群馬の法人ITサポートサービス Wide Net[ワイドネット]")
