jQuery Plugin To Apply Ripple Effects To Elements - Ripple

File Size: 6.54 KB
Views Total: 4333
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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.


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

  event: 'mousedown',
  color: '#fff'

Change logs:


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


  • Remove mouseleave event on non-touch devices


  • Some cleanup, added jquery method chaining


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


  • Add properties to simulate paper lift effect


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


  • Fire custom events before/during/after ripple


  • Fix issue with improved touch support


  • Better support for touch interfaces


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


  • 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.