Adds Material style ripple to buttons
<linkhref="stylesheet"type="text/css"href="ripple.min.css"><scripttype="text/javascript"src="jquery.min.js"></script><scripttype="text/javascript"src="ripple.min.js"></script>
or
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/offon:'mousedown',// The event to trigger a ripple effectopacity:0.4,// The opacity of the ripplecolor:"auto",// Set the background color. If set to "auto", it will use the text colormulti:false,// Allow multiple ripples per elementduration:0.7,// The duration of the ripple// Filter function for modifying the speed of the ripplerate:function(pxPerSecond){returnpxPerSecond;},easing:'linear'// The CSS3 easing function of the ripple});Elements can be overridden with their own default options:
<ahref="#"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