jQuery Plugin For Material Design Ripple Click Effect - Material Ripple

jQuery Plugin For Material Design Ripple Click Effect - Material Ripple
File Size: 4.77 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Provides a simple way to create interactive ripple click effects on action buttons/links, featured in the Google Material Design specification. Implemented in jQuery and animated with CSS3 transforms, @keyframes and animations.

See also:

How to use it:

1. Load the required jquery.materialripple.css in the document's head section.

<link rel="stylesheet" href="css/jquery.materialripple.css">

2. Load the latest jQuery library and the jquery.materialripple.js script at the end of the document.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/jquery.materialripple.js"></script>

3. Add the class 'ripple' to your action buttons/links.

<a href="#" class="button ripple">Click me</a>

4. Call the function and the plugin will do the rest.

$(function(){
  $('.ripple').materialripple();
});

Change log:

2015-07-03

  • Added support for multiple ripples, cleaned up code, removed ripple element after animation

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