Ripple Effect

Create ripple animation when user click the element.

Preview how it look

Installation

npm install @nureon22/ripple-effect

Using CDN without installing

Using HTML script tag

<script src="https://cdn.jsdelivr.net/npm/@nureon22/ripple-effect/dist/main.js"></script>

Using ESModule

import RippleEffect from "https://cdn.jsdelivr.net/npm/@nureon22/ripple-effect/dist/main.esm.js";

Without CDN

Copy files from dist directory to your project.

Usage

RippleEffect.attachTo(targetElement, options);

Note TargetElement's CSS position must be relative or absolute.

Supported Options

color - string
Default "currentColor"

opacity - number
Default 0.12.

duration - number
Ripple effect animation duration in milliseconds. Default 400.

unbounded - boolean
If true, the ripple effect overflow will be visible. Default false.

autoexit - boolean
If true, the ripple effect wouldn't exit until mouseup or touchend event. Default true.