data-ripple

Inspired by Material Design ripple effect.

Designed to be framework agnostic and work w/ modern SPA where state of app could be changed dynamically over time, so ripple options also will change.

Install

npm i data-ripple

Usage

Declarative

After importing module, declarative approach will find and init all elements w/ data-ripple attribute

import 'data-ripple';

<button data-ripple>Click me</button>
<div data-ripple>Click me</div>
<span data-ripple>Click me</span>

Imperative

import { rippleEffect, Ripple } from 'data-ripple';

...

const ripple = document.querySelector('#ripple');
new Ripple(ripple, { ... });

function handleMouseDown(e) {
  rippleEffect(e);
}

...

<button id="ripple">Click me</button>

<div onmousedown="handleMouseDown(event)">Click me</div>

Options

Declarative | Imperative | Type | Default | Description ----------- | ---------- | ---- | ------- | ----------- color | data-ripple-color | string | contrast (black/white) color for container background, 0.15 opacity | Ripple effect color (rgba, hsla, HEX) timingFunction | data-ripple-timing-function | string | cubic-bezier(0.4, 0, 0.2, 1) | Animation timing function opacity | data-ripple-opacity | number | 1 | Ripple effect opacity value in range 0 - 1 sizeModifier | data-ripple-size-modifier | number | 1 | Modifier for ripple effect size (radius) enterDuration | data-ripple-enter-duration | number | 550 | Value in ms for ripple effect fadeIn animation exitDuration | data-ripple-exit-duration | number | 400 | Value in ms for ripple effect fadeOut animation disableCentering | data-ripple-disable-centering | boolean | false | By default ripple effect animation will start under user mouse position. This option states for all ripples starts directly from container element center fadeOutOnClick | data-ripple-fade-out-on-click | boolean | false | By default ripple effect will start on mouse down and will terminate only on pointe release. This options overrides this behaviour to execute ripple fadeOut directly after fadeIn animation

License

This project is licensed under the terms of the MIT license.