jQuery Plugin For Customizable Material Design Ripple Effect - legitRipple.js

legitRipple.js is a jQuery plugin used to create adaptive, smooth, draggable and highly customizable ripple click effect using CSS3 transitions. Inspired from the Google Material Design's Responsive interaction spec and works on any html elements.

Basic usage:

1. Load the style sheet ripple.css in the head section, and the JavaScript file ripple.js after loading jQuery library.

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

2. Call the ripple() method with default options on desired element and we're ready to go.

$(".element").ripple();

3. Customize the ripple click effect.

$(".element").ripple({

  // ets a ripple max-width. 
  // adaptPos: true option requires this to be in % for correct rendering; 
  // can be any unit for use without adaptPos. 
  // 100% for circles.
  maxDiameter: false,

  // Whether the ripple should be able to be dragged
  dragging: true,

  // Whether to transform the ripple according to dragging coordinates.
  adaptPos: true,

  // How to scale the ripple when dragging
  // "proportional": Proportional to the amount it was dragged. 
  // "fixed": Don't scale and release ripple when dragging upwards.
  scaleMode: "fixed",

  // If using a custom ripple element.
  template: false,

  // Gives the ripple a fixed position in the parent.
  fixedPos: null,

  // HTML5 dragging is disabled on ripple elements by default for nicer interaction.called each time the ripple element's style property changes
  allowDragging: false,

  touchDelay: 100,

  // called each time the ripple element's style property changes
  callback: null
  
});

4. Change the default styles of the ripple effect.

.legitRipple-ripple {
  ...
}

5. Public methods.

// removes all event handlers from a ripple element.
//if you call it during a ripple animation, the animation will still complete
$(".element").ripple({unbind: true});

// stops any ripple animations in their tracks and removes any plugin created elements, classes and event bindings.
// calling .ripple() will still work
$.ripple.destroy();

Change log:

2015-11-30

• Added touchDelay option

2015-11-28

• v1.0

2015-11-26

• Fixed nav reaching out of header on some screens
• Fixed ghost ripple elements when holding down mouse

2015-11-13

• Fixed "mousemoved" not being reset

2015-11-09

• Added 'fixedPos', Changed ’hasCustomElement' to 'template'

2015-11-01

• Cross browser compatibility

2015-10-18

• Multi touch, Callback is option, improved touch events

2015-10-16

• Fixed: Spam clicking causes "stuck" ripples

2015-10-12

• Improved touch interaction
• Added workaround for right-clicking issue

2015-10-11

• Improved touch interaction
• Added unbind and destroy methods
• Made demo fancy

---

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