@nureon22/ripple-effect v1.3.0

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.