BLOG

画像の上にマウスをかざずと波紋が生じてどんどん広がるまか不思議な「jQuery Ripples」を紹介します。まずはサンプルを作りましたのでご覧ください。(残念ながらスマホには対応しておりません。)

サンプル

いかがですか?マウスを動かしたりクリックすると綺麗な波紋が出てきますね。一見複雑で難しそうですが、簡単に実装することができます。

 

以下からプラグイン「jQuery Ripples」をダウンロードしてください。

github

利用するのはdistの中のjquery.ripples-min.js とjquery.ripples.jsです。

jsフォルダを作成して入れておきます。

 

次にHTML head内にスクリプトを記入します。

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script>
<script src=”js/jquery.ripples-min.js”></script>

<script>
$(document).ready(function() {
$(‘#wrapper’).ripples({ //波紋をつけたい要素の指定
resolution: 800, //波紋の広がりの速度(値が大きいほど遅くなる)
dropRadius: 10, //波紋の大きさ(値が大きいほどでかくなる)
perturbance: 0.01 //波紋による屈折量(値が大きいほどブレる)
});
});
</script>

 

そしてCSSには以下のように指定するだけです。赤部分は波紋を入れたい画像のjpgです。

 


WordPressランキング


©  WPcustomiser All Rights Reserved.
PAGE TOP