Skip to content
jQuery ripple plugin
JavaScript CSS HTML
Branch: master
Clone or download
Latest commit 6694e58 Sep 22, 2016
Permalink
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
README.md 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

README.md

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

You can’t perform that action at this time.