Simple jQuery Plugin to Create Water Ripple Effects – Water Ripple Effect on Background



Demo : http://www.onlinetutorialsweb.com/demo/javascript-water-ripple
Plugin URL : https://github.com/sirxemic/jquery.ripples

Please LIKE our Facebook page for daily updates…
https://www.facebook.com/Online-Tutorial-Html-Css-JQuery-Photoshop-1807958766120070/

Track: Cadmium – Melody (feat. Jon Becker)
Link: https://youtu.be/9MiFRbymQXQ

23 thoughts on “Simple jQuery Plugin to Create Water Ripple Effects – Water Ripple Effect on Background

  1. HELP, HELP, HELP, HELP

    What have I done wrong ???

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>WATER</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body>
    <section></section>

    <script src="https://code.jquery.com/jquery-3.3.1.js"></script&gt;
    <script src="jquery.ripples-min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $('section').ripples({
    dropRadius:12,
    perturbance:0, 05,
    });
    })
    </script>
    </body>
    </html>

    css

    body{
    margin:0;
    padding:0;
    }

    section{
    background:url(img/stars.jpg)no-repeat center center / cover;
    width:100%;
    height:100vh;
    }

  2. Hi i can't some you
    html code
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Water Effects</title>
    <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <section></section>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script&gt;
    <script src="jquery.ripples-min,js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $('section').ripples({
    dropRadius: 12
    perturbance: 0.05,
    });
    })
    </script>
    </html>
    css
    body
    {
    margin: 0;
    padding: 0;
    }
    section
    {
    background: url(http://wallpapers4screen.com/Uploads/19-1-2016/3150/thumb2-blonde-women-umbrella-woman-the-rain.jpg) no-repeat;
    background-size: cover;
    width: 100%;
    height: 100vh;
    }
    can help me ?

Leave a Reply

Your email address will not be published. Required fields are marked *