マウスをクリックしたり動かすと波紋のエフェクトができるjQueryプラグイン「jquery.ripples」のご紹介です。
波紋のエフェクトがとても自然で美しいです。
波紋を表現できるjQueryプラグイン「jquery.ripples」
デモを見て頂けるとわかると思うのですが、本物の波紋のようです。
初めて見た時は本当に『おぉ』となるくらい驚きました。
「jquery.ripples」のつかい方
1. こちらから該当ファイルを取得します。
2. bodyの閉じタグ直前に、jQuery本体とダウンロードしたファイルを呼び込みます。
|
1 2 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script src="js/jquery.ripples.js"></script> |
3. 適用する場所を指定します。
|
1 2 3 4 5 |
$('.sample').ripples({ resolution: 512, dropRadius: 20, perturbance: 0.04, }); |
|
1 2 3 4 5 |
$('body').ripples({ resolution: 512, dropRadius: 20, perturbance: 0.04, }); |
以上で設置は完了です。
余談ですが、サントリーの企業情報ページ（採用ページ）にてこのプラグインを使った素敵なページがあります。
ご興味のある方はご覧ください。
暑い日に見ていると癒やされますね。
