Skip to content

mopcweb/data-ripple

Repository files navigation

data-ripple

npm version GitHub license Size Downloads

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.