Material Design Wave-like Animation On Click - jQuery Ripple.js
File Size: | 13 KB |
---|---|
Views Total: | 262 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Ripple.js is a jQuery plugin that adds a customizable stunning ripple click effect, which is a visual technique commonly used in Material design, to elements on your website or web application.
It creates a ripple-like animation that emanates from the point where the user clicks on an element, simulating the effect of a water droplet hitting the surface of a pond. Typically used in clickable elements (like buttons and links) to provide visual feedback to the user, indicating that their interaction with the element has been registered.
See Also:
How to use it:
1. Download and include the jQuery Ripple.js plugin's files on the page.
<script src="/path/to/cdn/jquery.slim.min.js"></script> <link rel="stylesheet" href="/path/to/dist/ripple.min.css" /> <script src="/path/to/dist/ripple.min.js"></script>
2. Apply the ripple click effect to the element.
$.ripple('.myElement', { // options });
3. Customize the trigger event. Default: 'mousedown'.
$.ripple('.myElement', { on: 'mouseenter', });
4. Config the appearance of the ripple click effect.
$.ripple('.myElement', { opacity: 0.4, color: "auto", multi: false, duration: 0.7, rate: function(pxPerSecond) { return pxPerSecond; // animation speed }, easing: 'linear' });
5. You're also allowed to pass the options via HTML data
attributes.
<a href="#" data-duration="1" data-color="black" data-opacity="1"> Click Me </a>
This awesome jQuery plugin is developed by jakiestfu. For more Advanced Usages, please check the demo page or visit the official website.