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.
npm i data-rippleAfter 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>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>| 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 |
This project is licensed under the terms of the MIT license.