こんにちは、ウェブラボ技術メモです。
今回はマウスに合わせて波紋を生み出すjQueryプラグイン「jQuery Ripples」を紹介したいと思います。
まずはDEMO用意致しましたのでご覧下さい。
→DEMO
背景画像部分でマウスを動かしたり、クリックするとキレイな波紋が出ますね。
一見難しそうに見えますが簡単に実装することが可能です。
では解説していきます。以下からプラグインをダウンロードしてきてください。
まずはjquery本体と一緒にプラグインを読み込ませます。
■HTMLhead内
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="js/jquery.ripples-min.js"></script>
次にプラグインの設定を行います。
■HTMLhead内 スクリプト部分
<script>
$(document).ready(function() {
$('#wrapper').ripples({ //波紋をつけたい要素の指定
resolution: 800, //波紋の広がりの速度（値が大きいほど遅くなる）
dropRadius: 10, //波紋の大きさ（値が大きいほどでかくなる）
perturbance: 0.01 //波紋による屈折量（値が大きいほどブレる）
});
});
</script>
あらかじめ波紋をつけたい要素に背景画像を指定しといてください。
■CSS 指定した要素部分
#wrapper {
background: url(../img/img01.jpg) no-repeat center center;
background-size: cover;
}
必要な設定は以上です。スクリプト部分の値を調整することによって自分好みの波紋にすることが可能です。
ですが値の調整が難しかったので試行錯誤することになるかもしれません。
→DEMO
仕組みとしては、指定要素の後ろにcanvasタグを敷いてそこで波紋を描画しているようです。
対応ブラウザは、主要ブラウザはもちろんのことIEは11から動作しましたので最新のものである必要があります。
同一ページ内で複数個所に導入するとページがかなり重くなるので注意が必要です。
以上、技術メモでした。