jQuery Plugin To Apply Ripple Effects To Elements - Ripple

jQuery Plugin To Apply Ripple Effects To Elements - Ripple
File Size: 6.54 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

$('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.