How to change the image in the Water-Ripple effect, when the effect changes, the picture that it comes from is taken from the internet:
<div class="a ripples" style="background-image:url(http://placekitten.com/800/500)">
When I change the image to pull one of my pc the effect some;
I have the following code.
<!DOCTYPE html>
<!-- saved from url=(0082)http://www.jqueryscript.net/demo/jQuery-Plugin-For-Water-Ripple-Animation-ripples/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>jQuery ripples plugin demos</title>
<link href="./jQuery ripples plugin demos_files/jquerysctipttop.css" rel="stylesheet" type="text/css">
<style>
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;
}
</style>
</head>
<body >
<div class="jquery-script-clear"></div>
</div>
</div>
<div class="a ripples" style="background-image:url(http://placekitten.com/800/500)">
</div>
<div class="error"></div>
<script src="jquery.min.js"></script>
<script src="jquery.ripples.js"></script>
<script>
$(document).ready(function() {
try {
$('.a,.b,.c').ripples({
resolution: 256,
perturbance: 0.04
});
}
catch (e) {
$('.error').show().text(e);
}
});
</script>
</body></html>