手軽に画像に波紋をかけるjQueryプラグイン「jQuery Ripples」

画像にちょっとした効果をかけたい。そしてそれは波紋のようなものが良い。
そんなこともあるかもしれません。
迷わずjQueryプラグイン「jQuery WebGL Ripples」を採用しましょう。
気持ちのよい波紋が登場します。

sponsors

使用方法

jQuery WebGL Ripplesからファイル一式をダウンロード。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.ripples.js"></script>
<script>
$(document).ready(function() {
  $('.class名').ripples({
    resolution: 512, 
    dropRadius: 20, 
    perturbance: 0.04 
  });
});
</script>
あとは対象のclassなどに画像を記載の上、記述すれば完成です。
サンプルでは、bodyに対して背景画像を設定しています。

サンプル

背景にあるものです。
Javascriptサンプルページ一覧
skuare.net

sponsors