lv-ripple

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

Angular version https://github.com/exodusanto/ng-ripple

Version

0.1.0

Dependencies

• jQuery

Installation

NPM

$ npm install lv-ripple

or Bower

$ bower install lvRipple

Examples

Various examples: https://lv-ripple.antoniodalsie.com/

Command

Search all ripple inside page

$.ripple.init();

Initialize element or a group of elements

$(selector).ripple();

Other command:

Show all active ripple

$.ripple.list();

Enable/Disable element ripple

$(selector).ripple("enable");
$(selector).ripple("disable");

Update option of ripple

$(selector).ripple("update");

Destroy element ripple

$(selector).ripple("destroy");

Save instance and use command

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

Options

Create directive with Element:

<ripple></ripple>

or with Class:

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

or with Attibute:

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

or

<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

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

General Options

    $.ripple.config({
		rippleOpacity: .2,
		rippleDelay: 100
	});

Ripple Opacity (rippleOpacity):

For all element

Ripple Incremental (rippleDelay):

This is the delay of exit animation of ink

Changelog

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