jQuery Plugin To Apply Ripple Effects To Elements - Ripple

Ripple is a minimalist jQuery plugin used to apply Android L & Material Design concepted ripple effects to Html elements (e.g. UI buttons) when clicked or touched. Based on CSS3 transform, animation, border-radius, keyframes and opacity properties.

See also:

• Hamburger Button Transition Effect with jQuery and CSS3
• Android L Style Click/Touch Effects with jQuery and CSS3 - rippler
• Google Material Design Ripple Effects with jQuery and CSS3
• Material Design Action Button Transition Effect with jQuery and CSS3
• Google Material Design Concept UI Button with jQuery and CSS3
• jQuery Plugin To Add Google Material Design Ripple Animations To Buttons

How to use it:

1. Include the required jquery.ripple.css in the head section of your document.

<link rel="stylesheet" href="jquery.ripple.css">

2. Include the latest version of jQuery library and the jQuery ripple.js script at the bottom of the document.

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

3. Create an UI button where you wish to apply a ripple effect when clicked or touched on.

<button>Click me</button>

4. Call the plugin on the button and we're done.

$('button').ripple();

5. Custom the interaction event and the ripple effect color via JS settings. The default params are:

$('button').ripple({
  event: 'mousedown',
  color: '#fff'
});

Change logs:

2015-05-06

• Fix end events to be more accurate for mobile vs desktop
• Only run end event handlers if start events have been handled

2015-01-27

• Remove mouseleave event on non-touch devices

2015-01-14

• Some cleanup, added jquery method chaining

2015-01-13

• Using timers again with clearTimeout, hoping to resolve iOS issues
• Cache event status to block multiple ripple handlers from being called

2015-01-09

• Add properties to simulate paper lift effect

2014-12-31

• Using animationend event instead of timeout for the after ripple event

2014-12-30

• Fire custom events before/during/after ripple

2014-12-05

• Fix issue with improved touch support

2014-12-04

• Better support for touch interfaces

2014-11-08

• Add ripple-active class to the paper element for ripple duration

2014-10-30

• Add support for touchstart

---

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