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:
- 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.