<h1 style="margin-top:150px;">jQuery ripples plugin demos</h1>
<div class="a" style="background-image:url(http://placekitten.com/800/500)">
</div>

<div class="b" style="background-image:url(http://placekitten.com/500/700)">
</div>

<div class="c" style="background-image:url(http://placekitten.com/600/700)">
</div>

<div class="error"></div>

<script src="http://www.jqueryscript.net/demo/jQuery-Plugin-For-Water-Ripple-Animation-ripples/js/jquery.ripples.js">
</script> 
body { margin: 0; }
div {
	position: fixed;
	font-family: "Helvetica Neue","Helvetica","Arial",sans-serif;
}

.a {
	left: 0;
	top: 0;
	right: 51%;
	bottom: 51%;
	background-size: cover;
}

.b {
	left: 51%;
	top: 25.5%;
	right: 0;
	bottom: 25.5%;
	background-attachment: fixed;
}

.c {
	left: 0;
	top: 51%;
	right: 51%;
	bottom: 0;
	background-size: cover;
}

.error {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0,0,0,0.8);
	color: #eee;
	padding: 20px;
	display: none;
}
$(document).ready(function() {
	try {
		$('.a,.b,.c').ripples({
			resolution: 256,
			perturbance: 0.04
		});
	}
	catch (e) {
		$('.error').show().text(e);
	}
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
  2. http://www.jqueryscript.net/demo/jQuery-Plugin-For-Water-Ripple-Animation-ripples/js/jquery.ripples.js