immaterial-design-ripple

Immaterial Design Ripple (beta)

HTML5 Canvas based pixelated ripple effect.

See Example

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 👍

Document

API Reference(日本語)

Test

git clone https://github.com/59naga/immaterial-design-ripple.git
cd immaterial-design-ripple
 
npm install
npm test

License

MIT