Highly Customizable Ripple Effect In JavaScript – Ripple.js

Category: Animation , Javascript | February 14, 2022
Author:udezueoluomachi
Views Total:344 views
Official Page:Go to website
Last Update:February 14, 2022
License:MIT

Preview:

Highly Customizable Ripple Effect In JavaScript – Ripple.js

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

You Might Be Interested In:


One thought on “Highly Customizable Ripple Effect In JavaScript – Ripple.js

Leave a Reply