Highly Customizable Ripple Effect In JavaScript – Ripple.js

Preview:

Description:

Ripple click effect is a way to provide feedback when a user clicks on an element. There are numerous tutorials and articles on how to create the ripple effect, but they all were too simplistic or didn’t seem very customizable.

Ripple.js is a brand new JavaScript library that applies a highly customizable ripple effect to any DOM elements using some of the latest technologies (HTML5 canvas and JavaScript ES6).

How to use it:

1. Import the ripple.js JavaScript library.

<script src="./ripple.js"></script>

2. Create a new instance of the Ripple.

const ripple = new Ripple();

3. Apply a default ripple effect to the element you specify.

<button id="parent">
  Click Me
</button>

ripple.createRipple({
  "rippleParentId":"parent",
});

4. Note that the ripple position is only accurate for elements whose display is set to relative.

button {
  position: relative;
}

5. Config the ripple effect with the following parameters:

ripple.createRipple({
  "rippleParentId":"parent",
  "height" : 50,
  "width" : 150,
  "foreground" : "#ffffff11",
  "background" : "#00000033",
  "time" : 7, // Smaller times tend to provide better animations.
  "type" : "", // 'single' or 'double'
  "increaseBy" : 2
});

Changelog:

02/14/2022

• New version