How to make Water Ripple Effect using jQuery ?

Last Updated : 11 May, 2023

In this article we will learn about making water Ripple effects using jQuery, Ripples.js is a well-designed and compact jQuery plugin for producing stunning ripple effects. here we will use jQuery ripple.js.

Installation: Before moving further, firstly we have to add the water ripple CDN file to our project file:

https://cdnjs.cloudflare.com/ajax/libs/jquery.ripples/0.5.3/jquery.ripples.min.js

Approach:

First, add the above CDN to your working file.
The drop radius defines the size (in pixels) of the drop that results by clicking or moving the mouse over the canvas.
Perdurance is the amount of refraction caused by a ripple. 0 means there is no refraction.
The resolution, The width, and the height of the WebGL texture to render to. The larger this value, the smoother the rendering and the slower the ripples will propagate.
Interactive, mouse clicks and mouse movements both events can trigger the effect.

Example: In this example, we are using the above-explained approach.

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery.ripples/0.5.3/jquery.ripples.min.js">
    </script>
</head>
 
<body>
    <div class="full-landing-image">
        <h1>GeeksForGeeks</h1>
    </div>
</body>
</html>

CSS Code:

CSS

body{
    margin: 0;
    padding: 0;
}
 
h1{
    text-align: center;
    color: blueviolet;
    padding-top: 300px;
}
 
.full-landing-image{
    width: 100%;
    height: 100vh;
    background-color: black;
    background-size: cover;
}

JavaScript Code:

Javascript

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
 
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
        </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery.ripples/0.5.3/jquery.ripples.min.js">
        </script>
     
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }
 
        h1 {
            text-align: center;
            color: blueviolet;
            padding-top: 300px;
        }
 
        .full-landing-image {
            width: 100%;
            height: 100vh;
            background-color: black;
            background-size: cover;
        }
    </style>
</head>
 
<body>
    <div class="full-landing-image">
        <h1>GeeksForGeeks</h1>
    </div>
     
    <script type="text/javascript">
        $(".full-landing-image").ripples({
            resolution: 512,
            dropRadius: 20,
            interactive: true,
            perturbance: 0.02,
        });
    </script>
</body>
</html>