Adds Material style ripple to buttons
<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>or
$ bower install ripplejsInclude 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>$ npm install
$ npm run-script build
$ npm run-script build-watch # To watch assets- The element selected to contain a ripple will gain the following CSS properties:
position: relativetransform: translate3d(0,0,0)
MIT