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

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

使用方法
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に対して背景画像を設定しています。

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

sponsors

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

記事作成:
記事URL:

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