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

Polymer Like Ripple Animations with jQuery and CSS3 - ripple.js
File Size: 8.61 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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 sus-happy. For more Advanced Usages, please check the demo page or visit the official website.