Jquery Ripples plugin is a pretty and simple plugin to get the water ripple effect on webpages. This works on all the browsers which has WebGL extension supported. The basic functionality is to get the ripple effect on your webpage with a background. If you feel your background images are boring and want to try something creative this will be an option to make your users feel different.
Implementing the Jquery ripple is so simple and can be done only in 3 steps
1. Include the jquery.ripples.js file with jquery.js in your project.
1 2 | <script src=”jquery.min.js”></script> <script src=”jquery.ripples.js”></script> |
2. Create a div with a background image
1 | <div id=”demo” class=”demo” style=”background-image: url(bg.jpg)”></div> |
3. Now call the plugin with options provided
1 2 3 4 5 6 7 8 | $(document).ready(function(){ $(‘#demo’).ripples({ resolution: 512, dropRadius: 20, perturbance: 0.04, interactive: true }); }); |
You can also add ripples dynamically, change the state of the ripples and even destroy the ripples
1 2 3 4 | $(‘#demo’).ripples(“drop”,x,y,radius,strength); // to add the ripples dynamically. $(‘#demo’).ripples(“pause”); // to pause the ripple effect $(‘#demo’).ripples(“play”); // to resume the ripple effect $(‘#demo’).ripples(“destroy”); // to remove the ripples effect completely |
Note: if you destroy the ripples once it has to be re-initialized again to get the effect.
link to download th ripple.js: Jquery.ripple.js
Happy coding………….:)