Ripple.js •

Dependency-free Material Design ripple effect for the web, that wouldn't interfere your elements' DOM.

• Tiny (3kb gzipped, even less with your webpack)
• Doesn't need a DOM node as a host, you can create ripples over inputs and images without hacks
• Customizable
• Capable of creating multiple ripples at once
• Enlarges on mousedown, fades out on mouseup
• Works with touch devices
• Has simple API
• Supports IE 10+
• Runs smoothly (always 30+ fps) on low-end devices (with power of CSS3 transitions)

See a Demo

Getting Ripple.js

Like a vendor lib

Check the latest release

via npm

$ npm install proper-ripple --save-dev

via yarn

$ yarn add proper-ripple

Make sure to include it in your webpack (npm/yarn usage) (uses babel-loader with es-2015 preset & css-loader)

Usage

This is how you can tell Ripple.js to watch any element matching a selector (including dynamically added)

ripple.watch('#demo-2 button')

This is how you can add a listener to an element \ array of elements (DOM nodes)

var yourElement = document.querySelector('.login-button')
var manyNodes = document.querySelectorAll('button')

ripple.bindTo(yourElement) //will trigger on your element
ripple.bindTo(manyNodes) //will trigger on any of these

This is how you can remove all listeners (rippleBind is the same for ripple.bindTo)

var rippleBind = ripple.watch('#demo-2 button')
rippleBind.remove()

Customization

Full set of props

{
  color: "#fafafa", //{string} background color (like in CSS)
  opacity: 0.21, //{number} ripple max opacity (like in CSS)
  borderRadius: 'auto', //auto -- copy target props OR {Srting} CSS prop value
  borderWidth: 'auto',  //auto -- copy target props OR {number} CSS prop value !IN PX!
  zIndex: 999, //{number}
  transitionDuration: 500, //{number} in ms
  timingFunction: "cubic-bezier(.4,0`,.42,1)", //{string} transition timing function
  constant: false //{bool} enlarging speed is constant on any element size
}

Changing props

Way A

var rippleBind = ripple.watch('#demo-2 button')
rippleBind.factory.rippleProps = {
	opacity: 0.41,
	transitionDuration: 700,
} //it's a plain js object

rippleBind.factory.rippleProps.color = '#000'

Way B

var myProps = {
	color: '#000',
	opacity: 0.4,
	transitionDuration: 700
}

ripple.watch('#demo-2 button', myProps)
ripple.bindTo(manyNodes, myProps)

Way C

ripple.setDefaults({
	color: '#000',
	opacity: 0.41,
	transitionDuration: 700
})

Running tests

There are 2 ways to run tests for Ripple.js

1. PhantomJS
2. Browser mocha tests

Test's specs files are the same, but for the sake of PhantomJS they must be written in ES5

CLI PhantomJS testing

Assuming you have all devDependencies installed

$ npm test

Browser testing

$ npm run test-browser