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