Customizable Material Ripple Click Animations with jQuery - Rippleria

Rippleria is a super lightweight yet customizable jQuery plugin for implementing Material Design inspired ripple click / tap effects using CSS3 animations. Works with any DOM elements like buttons, images, divs, etc.

How to use it:

1. Load the stylesheet jquery.rippleria.css in the head section and the JavaScript jquery.rippleria.js after jQuery library but before the closing body tag.

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

2. Add the data-rippleria attribute to the DOM element where you want to implement the ripple click effect.

<button data-rippleria>Default</button>

3. Customize the ripple click effect using html5 data attributes.

<button data-rippleria 
  data-rippleria-color="blue" 
  data-rippleria-easing="ease-in" 
  data-rippleria-duration="5000">
  Click me
</button>

4. The CSS modifiers.

• .rippleria-dark: dark ripple effect
• .rippleria-blured: smooth ripple effect

5. You can also apply the ripple click effect to any DOM elements and pass in the options via JavaScript.

$('.selector').rippleria({

  // aniamtion speed
  duration: 750,

  // custom easing effect
  easing: 'linear',

  // custom color
  color: undefined,

  // enable automatically adding .rippleria-dark class to the dark elements
  detectBrightness: true
  
});

Change log:

2016-05-17

• v1.3.1

---

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