How to make Water Ripple Effect using jQuery ?

Last Updated : 16 Feb, 2021

Here we are going to make a water ripple effect on our web page using jQuery. For this, we will be using 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.
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 movement both events can trigger the effect.

Below is the code for this effect.

HTML Code:

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:

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>

Output:

My Personal Notes

Related Articles

HTML

Javascript