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 ; } h 1 { text-align : center ; color : blueviolet; padding-top : 300px ; } .full-landing-image{ width : 100% ; height : 100 vh; 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: