Skip to content
jQuery ripple plugin
JavaScript CSS HTML
Branch: master
Clone or download
Latest commit 6694e58 Sep 22, 2016
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Fix reset class Sep 22, 2016
src Fix reset class Sep 22, 2016
.gitignore Add 0.1.0 version Jul 25, 2016
bower.json Issues #1 fix it with pointer-events to none, general fix Sep 22, 2016
gulpfile.js Added obj elements, fix double fire mobile event Jul 25, 2016
index.html Issues #1 fix it with pointer-events to none, general fix Sep 22, 2016
package.json 0.1.2 Sep 22, 2016


Material ripple effects for jQuery, Inspired by Angular Material Design , this plugin contains the ripple animation for buttons and links

Angular version




  • jQuery



$ npm install lv-ripple

or Bower

$ bower install lvRipple


Various examples:


Search all ripple inside page


Initialize element or a group of elements


Other command:

Show all active ripple


Enable/Disable element ripple


Update option of ripple


Destroy element ripple


Save instance and use command

var instance = $(selector).ripple();
instance.update(); // update option
instance.element(); // get element


Create directive with Element:


or with Class:

<a href="#" class="ripple"></ripple>

or with Attibute:

<a href="#" data-ripple></ripple>


<a href="#" ripple></ripple>

Add material button with box-shadow:

<ripple class="r-raised"></ripple>

Icon element:

<ripple class="r-icon"></ripple>

Fab element:

<ripple class="r-round r-raised"></ripple>

Disabled ripple

<ripple r-disabled></ripple>

or Disabled hover and active

<ripple clas="r-int-disabled"></ripple>

or Disabled all element:

<ripple class="disabled"></ripple>

Custom light color

<ripple r-light></ripple>

Custom ripple color

<ripple r-color="#fff"></ripple>

Custom ripple opacity

<ripple r-opacity="#f00"></ripple>

Ripple in-front (overink)

<ripple class="r-overink"></ripple>

Prevent ink for specific element and children

	<div class="r-noink">
		I hate ink
		I love ink

General Options

		rippleOpacity: .2,
		rippleDelay: 100

Ripple Opacity (rippleOpacity):

For all element

Ripple Incremental (rippleDelay):

This is the delay of exit animation of ink


Version 0.0.3:

Fix double fire mobile event

Version 0.0.2:

Fix array type (from jQuery to JS)

Version 0.0.1:

Create plugin

You can’t perform that action at this time.