Ripple-js NPM | npm.io

ripple-js

A small Javascript library for ripple effects

####View a demo here

Setup

With npm:1. At the root of your index, type npm install ripple-js into the command line.2. Add the tag <script src="node_modules/ripple-js/ripple.min.js"></script> to your index file.

Then simply add the class ripple to elements

Properties

To customize the ripple effect you can set the following tags on your ripple elements:

ripple-colorCustomize the background of the ripple °Corresponds to the css background property. You can set it to a color, a gradient or even a picture.°Examples: ripple-background="#FF8C00", ripple-background="radial-gradient(red, yellow, green)", ripple-background="url('some-image.jpg')"°Default Value: white
ripple-opacitySet the opacity of the ripple °Corresponds to the css opacity property. Set it to a numerical value between 0 and 1, where 0 means full transparency and 1 no transparency°Example: ripple-opacity="0.7"°Default value: 0.6
ripple-shadowAdd a shadow to the ripple °Corresponds to the css box-shadow property.°Example: ripple-shadow="box-shadow: 0px 0px 25px 2px rgba(112,112,112,0.63)"°Default value: none
ripple-press-expand-timeChange the time the ripple needs to fully expand while the element is being pressed. °The unit of measurement is seconds.°Example: ripple-press-expand-time="10"°Default value: 3
ripple-release-expand-timeSet the time the ripple needs to ripple away when the user releases the mouse / touch. °The unit of measurement is seconds.°Example: ripple-release-expand-time="1.5"°Default value: 0.4
ripple-leave-collapse-timeConfigure the time the ripple collapses in itselft when the user moves the touch / mousepress away from the element. °The unit of measurement is seconds.°Example: ripple-leave-collapse-time=".8"°Default Value: 0.4
ripple-cancel-on-moveIf applied, the ripple cancels on the slightest touch movement. °Normally the ripple gets canceled when the touch is being moved out of the container. With this attribute, the touch gets canceled on a touchmove or mousemove. This is especially great for when the container can be scrolled around by the user.
onrippleclickYou can specify JavaScript that executes when the ripple gets released in this attribute. It works like onclick and is a short alternative to listening for a ripple-button-click event.

###Methods

registerRipples()Call this method to register ripple elements afterwards °If you add ripple elements after the document has loaded, you then need to call this function. The function gets called auomatically on initial load.°Example:

document.body.innerHTML += '<div class="ripple">Added Afterwards</div>';
ripple.registerRipples();

ripple(element)With this function you can trigger a ripple programatically.°The only argument it takes is the element you want to start the ripple at. This element needs to have been registered before!°The ripple starts at the center of the element. This function is useful when you want to click an element based on key presses.°Example: ripple.ripple(document.getElementById("someEl"));

###Events