How to make Water Ripple Effect using jQuery ?
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 >w3wiki</ h1 > </ div > </ body > </ html > |
CSS Code:
CSS
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= "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>w3wiki</h1> </div> <script type= "text/javascript" > $( ".full-landing-image" ).ripples({ resolution: 512, dropRadius: 20, interactive: true , perturbance: 0.02, }); </script> </body> </html> |
Output:
Contact Us