Polymer Like Ripple Animations with jQuery and CSS3 - ripple.js

ripple.js is a small jQuery script to apply smooth ripple click animations on any Html elements as you seen on Polymer and Google Material Design. The ripple animation is based on CSS3 transforms and transitions so that the plugin only works with modern browsers and IE 10+.

How to use it:

1. Include the latest version of jQuery library and ripple.js script in the document.

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="src/jquery.ripple.js"></script>

2. Add the CSS class 'ripple' to your Html element and use data-color attribute to specify the ripple color.

<a href="#" data-color="#ddd" class="ripple">Click me</a>

3. Initialize the plugin and set the animation duration.

$( '.ripple' ).ripple({
'v_duration': 150, 
'h_duration': 150
});

---

This awesome jQuery plugin is developed by sushat4692. For more Advanced Usages, please check the demo page or visit the official website.