Item Name | Documentation by Author Name

Getting Started #back to top

touchMyRipple ( tmripple for short ) is a simple library that integrate ripple effect in your fantastic site!

Include the javascript

Or install with npm

									npm install touchmyripple --save

Methods#back to top

init(settings)

This method enables ripple effect to all the elements that have the attribute data-animation="ripple".

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'
									}

attachToSelectors(settings)

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'
									}

Demo#back to top

With init() method

HTML

JS

									// default color is 'rgba(255, 255, 255, 0.4)'
									// default eventListener is 'click'
									tmripple.init();

With attachToSelectors() method