touchMyRipple ( tmripple for short ) is a simple library that integrate ripple effect in your fantastic site!
Demo & Documentation
<script src="myDirectory/touchMyRipple.js"></script>
or
npm install touchmyripple --save
This method enables ripple effect to all the elements that have the attribute data-animation="ripple".
All the following options are optional
settings[Object]
{
// area is an option to make data-animation more specific
area: 'class, id',
// color...๐ค
color: 'rgba, hex, hsla',
// pass the scrolling element if it's not window
offsetEl: 'class, id',
// this option accept an event listener
eventListener: 'event'
}
This method enables ripple effect to all the elements that match the class passed in 'selectors'
settings[Object]
{
// selector of the element you want to attach the ripple ( is required )
selectors: 'class, id',
// color...๐ค๐ค๐ค๐ค๐ค๐ค
color: 'rgba, hex, hsla',
// pass the scrolling element if it's not window
offsetEl: 'class, id',
// this option accept an event listener
eventListener: 'event'
}
index.js
import tmripple from 'touchmyripple';
tmripple.init({
color: '#bada55', // default is 'rgba(255, 255, 255, 0.4)'
eventListener: 'touchstart' // default is 'click'
});
tmripple.attachToSelectors({
selectors: '#foo .bar [type=button]',
color: 'rgba(0, 0, 0, 0.4)',
eventListener: 'mousedown'
});