How to make Water Ripple Effect using jQuery ?
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:
.png)
