Ripple.js

Adds Material style ripple to buttons

View Demo

Installation

<link href="stylesheet" type="text/css" href="ripple.min.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="ripple.min.js"></script>

$ bower install ripplejs

Usage

Include jQuery, the ripple.css, and ripple.js into your page. Then upon initialization, you can activate ripple as follows:

$.ripple(".btn", {
	debug: false, // Turn Ripple.js logging on/off
	on: 'mousedown', // The event to trigger a ripple effect

	opacity: 0.4, // The opacity of the ripple
	color: "auto", // Set the background color. If set to "auto", it will use the text color
	multi: false, // Allow multiple ripples per element

	duration: 0.7, // The duration of the ripple

	// Filter function for modifying the speed of the ripple
	rate: function(pxPerSecond) {
        return pxPerSecond;
    },

	easing: 'linear' // The CSS3 easing function of the ripple
});

Elements can be overridden with their own default options:

<a href="#" data-duration="5" data-color="red" data-opacity="1">Slow Red Ripple</a>

Building

$ npm install
$ npm run-script build
$ npm run-script build-watch # To watch assets

Caveats

The element selected to contain a ripple will gain the following CSS properties:
- position: relative
- transform: translate3d(0,0,0)

License

MIT