Material Design Style Ripple Effect On Click / Touch - Ripple.js

Just another jQuery plugin that adds a smart Material Design style ripple effect to a given element that animates on click / touch. The plugin automatically detects the background color of your element / or its parent container and then changes the ripple colors so the ripple effect is more visible when being animated.

How to use it:

1. Add jQuery library and the jQuery ripple.js plugin's files to the webpage as usual.

<link href="ripple.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="ripple.js"></script>

2. You can activate the plugin on a clickable element by using the attribute 'data-ripple' as shown below:

<a class="btn" data-ripple="">Click me</a>

3. That's it. The plugin will auto apply a proper color to the ripple effect when the element gets clicked. You can also specify the ripple color using the 'data-ripple' attribute as this:

<a class="btn" data-ripple="#fff">Click me</a>

4. All default configuration options. You can include a line like this in the scripts:

$.fn.rippleEffect.defaults.inkDefaultColor = "#0000FF";

$.fn.rippleEffect.defaults = {

  // CSS classes
  inkContainerClass: "ripple",
  inkClass: "ink",

  // to avoid a global default you can add data-ripple="#ff00ff" to the element that will have the ripple and that color will be used.
  // or to use a tagrget elements background color for the ripple you can set the data-ripple="" and data-ripple-getcolorfromid="#elmentWIthBGColorToUSe"

  // falback color to use if using parent traversing to get a bg color.
  inkDefaultColor: "#F0F0F0", 

  // the ink color you want the element to use, this will override any bg checks for element and parent traversing, but if the ement has data-ripple="#fff" the #fff will be used above all else
  inkColor: "", 

  // if you append to a parent item that item will have the ripple span and it may block access to links and child elements
  // all i had to do was give any of the children of the appended element a z-index of 1, some i had to set position to relative.
  // append ink to a diffrent element. will find closest element matching.
  appendInkTo: "" 

};

---

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