Dynamic Ripple Click/Tap Effect In JavaScript – rippleEffect

Preview:

Description:

A tiny and easy-to-use JavaScript library that allows elements like buttons or links to display a rippling animation effect when clicked or tapped. This creates a sense of feedback, confirming the user’s action.

Thanks to the integration of MutationObserver, any elements that are dynamically added to the document will automatically apply the ripple effect. You have control over the ripple’s color, duration, and the elements it targets.

How to use it:

1. Download and load the ripple.js script in the document.

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

2. Initialize the rippleEffect and the ripple effect will be automatically applied to all buttons and elements with the ‘r’ class.

window.addEventListener('DOMContentLoaded', () => {
  rippleEffect.initialize();
}, false);

<button>
  Button Element
</button>
<div class="r">
  DIV Element
</div>
<a class="r">
  A Link
</a>

3. Available configuration options.

rippleEffect = {
  // target element
  elements: ".r,button",
  // ripple color
  color: "rgba(0,0,0,.1)",
  // duration of the animation (in seconds)
  transitionDuration: 1, 
  
};

4. Override the default styles of the ripple.

.rs {
  position: absolute;
  background: rgba(0,0,0,.1);
  pointer-events: none;
  width: 5px;
  height: 5px;
  transform: translate(-50%, -50%);
  border-radius: 100%;
}
@keyframes rippleAnimation {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 1;
    width: var(--ms);
    height: var(--ms);
  }
  100% {
    opacity: 0;
  }
}

Changelog:

01/30/2024

• Update ripple.js