Immaterial Design Ripple (beta)
HTML5 Canvas based pixelated ripple effect.
Installation
At NodeJS
$ npm install immaterial-design-ripple --save
import ImdRipple from 'immaterial-design-ripple';
ImdRipple.bindOnLoad('.imd-ripple');
At CDN
<script src="https://npmcdn.com/immaterial-design-ripple/release/immaterial-design-ripple.min.js"></script>
<button class="imd-ripple">Default effect</button>
<script>ImdRipple.bindOnLoad('.imd-ripple')</script>
Usage
ImdRipple.bindOnLoad(selector, options = {})
Bind a left-click event automatically to the elements of the selector After window onload.
If specify the options then set default of the ripple effect.
<script>
ImdRipple.bindOnLoad('body', {
pixelSize: 1,
bitCrash: 10,
color: 'black',
timingFunction: 'easeInCirc',
})
</script>
Becomes :+1:
Document
Test
git clone https://github.com/59naga/immaterial-design-ripple.git
cd immaterial-design-ripple
npm install
npm test