jQuery plugin to create click/touchstart ripple effects
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md
ripplr.css
ripplr.js
ripplr.min.js

README.md

Ripplr JS

Super simple jQuery plugin to create click/touchstart ripple effects like in the Google Material Design Guidelines.

Different than other scripts this plugin starts the effect on mousedown/touchstart and removes the ripple on mouseup/touchend. So click and hold (context menu) behaves like expected.

Also it automatically handles elements in wich the effect element can't be appended like images or submit buttons.

###Usage###

  1. Include the required ripplr.css in the head section of your document.

     <link rel="stylesheet" href="ripplr.css" type="text/css" />
    
  2. Include the latest version of jQuery and Ripplr JS in your document.

     <script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
     <script src="ripplr.min.js" type="text/javascript"></script>
    
  3. Fire the plugin via jQuery.

     // Submit buttons
     jQuery( 'input[type="submit"]' ).ripplr();
    
     // Multiple elements
     jQuery( '.foo, .bar' ).ripplr();
    

Ripplr automatically wraps a container around tags in wich the effect can't be appended to: input, select, textarea, img. You can disable that behaviour or add additional tags via the plugin options.

###Customization###

You can change the animation easing, animation speed and ripple color via CSS. Even different backgrounds are possible via plane CSS (example in the ripplr.css stylesheet).

###Options###

These are the default (and available) plugin options:

jQuery( 'input[type="submit"]' ).ripplr( {

  elementClass: 'ripplr_element',
  
  effectClass: 'ripplr_effect',
  
  wrap: [ 'INPUT', 'SELECT', 'TEXTAREA', 'IMG' ] 
  
} );