How to change the image in the Water-Ripple effect, when changing the effect some

0

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>
    
asked by anonymous 22.04.2015 / 18:45

0 answers