Skip to content
Related Articles

Related Articles

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=
    </script>
    <script src=
    </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=
        </script>
    <script src=
        </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 arrow_drop_up
Recommended Articles
Page :