material-ripple-effect v1.1.0

Material Ripple Effect

A JS only / No CSS lightweight utility to create and customize material design ripple effect.

Installation

via npm:

$ npm i material-ripple-effect

via CDN:

<script src="https://unpkg.com/material-ripple-effect@1.0.0/dist/index.js"></script>

API

options

Options for customizing ripples

let defaults = {
  color: "currentColor", // background color of ripple
  class: "", // Class to be added to ripple
  opacity: 0.1, // Opacity of ripple
  centered: false, // If true, then ripple will always originate from center of parent
  spreadingDuration: ".4s", // As its name suggests.
  spreadingDelay: "0s", // As its name suggests.
  spreadingTimingFunction: "linear", // As its name suggests.
  clearingDuration: "1s", // As its name suggests.
  clearingDelay: "0s", // As its name suggests.
  clearingTimingFunction: "ease-in-out", // As its name suggests.
};

RippleStart(e, options) => HTMLElement

Creates a ripple element but does not destroy it (use RippleStop for that). Returns a ripple DOM element.

Parameters

• e: MouseEvent such as mousedown or TouchEvent such as touchtstart
• options: Options for customizing ripples

node.addEventListener("mousedown", RippleStart);

RippleStop(ripple)

Destroys the ripple, slowly fading it out.

Parameters

• ripple: Ripple element from RippleStart

let handleStop = () => RippleStop(ripple);
node.addEventListener("mouseup", handleStop);

RippleBind(node, options) => { destroy() }

Binds event listeners to add and remove ripples when user interacts with the element.

Parameters

• node: HTML Node to add the event bindings to
• options: Options for customizing ripples

let rippler = RippleBind(document.querySelector('#ripplebox'));

// To destroy ripples and unbind #ripplebox
rippler.destroy();

Ripple(node, options)

Create a ripple programmatically

Parameters

• node: HTML Node to ripple
• options: Options for customizing ripples

// Will cause a single ripple to occur
Ripple(document.querySelector('#ripplebox'))

Thanks To:

• Ripplet.js
• Node Waves

License

WTFPL