skuare.net

JavaScriptライブラリjQueryのサンプルを中心にWebサイト構築に役立つ情報を紹介

手軽に画像に波紋をかける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に対して背景画像を設定しています。

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

sponsors

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

記事作成:
記事URL:

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

前の記事:
次の記事:マウスのカーソルをFontAwesomeのアイコンに変更できるjQueryプラグイン「jQuery Awesome Cursor」

あなたにはこちもお勧め!

jQuery プラグインまとめ!

JavaScript

read more

Column

read more