(No jQuery) Material Design Ripple Effect In Pure JavaScript

Material Design Ripple is a simple and pure JavaScript/CSS implementation of customizable Material Design Ripple effects.

Must Read: A Simple & Lightweight Ripple Effect Plugin | jquery-waves

button-ripple-effect-css-codepen

How to make use of it:

1. CSS/CSS3 styles are necessary for the ripple effect.

.ripple {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  animation: rippleEffect .88s 1;
  opacity: 0;
}
@keyframes rippleEffect {
  0% {
    transform: scale(1);
    opacity: 0.4;
  }
  100% {
    transform: scale(100);
    opacity: 0;
  }
}

2. JavaScript.

window.onload = function() {
  let rippleElements = document.getElementsByClassName("myRipple");
  for(var i = 0; i < rippleElements.length; i++) {
      rippleElements[i].onclick = function(e) {
        let X = e.pageX - this.offsetLeft;
        let Y = e.pageY - this.offsetTop;
        let rippleDiv = document.createElement("div");
        rippleDiv.classList.add('ripple');
        rippleDiv.setAttribute("style","top:"+Y+"px; left:"+X+"px;");
        let customColor = this.getAttribute('ripple-color');
        if(customColor) rippleDiv.style.background = customColor;
        this.appendChild(rippleDiv);
        setTimeout(function(){
          rippleDiv.parentElement.removeChild(rippleDiv);
        }, 900);
  }
}
}

3. Apply a ripple effect to a button.

<button class='myRipple'>CLICK ME</button>

4. Customize the ripple color using the ‘ripple color‘ theme like this:

<button class='myRipple' ripple-color='red'>Custom Color</button>

See Demo And Download

Official Website(TrevorWelch): Click Here

This superior jQuery/javascript plugin is developed by TrevorWelch. For extra advanced usage, please go to the official website.

Related Posts

Data-Table-Generator-Tabulator

Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…

alert-confirm-prompt-attention-js

Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…

Bootstrap-4-Sidebar-Menu-Responsive-Template

Bootstrap 4 Sidebar Menu Responsive Template | MDB

Bootstrap Side Navbar – Responsive sidebar template based on the Bootstrap 4 framework. An easy-to-use, totally responsive, Google Material Design impressed aspect navigation for modern web app…

Bootstrap-4-Toast-Notification-Plugin

Lightweight Bootstrap 4 Toast Notification Plugin | BS4 Advanced Toast

A lightweight Bootstrap 4 Toast Notification plugin integrated with JS/jQuery. bs4-toast.js is a JavaScript library that enhances the native Bootstrap toast component with icons, buttons, callbacks, and…

Audio-Visualizations-Wave

How to Create Audio Visualizations with JavaScript | Wave.js

Audio Visualizer Library – wave.js is a vanilla javascript audio visualization library that provides 20+ creative audio visualization effects to bring more engagement to your visitor. Contribute…

bootstrap-5-treeview

Bootstrap 5 Treeview Dynamically Collapsible | bs5treeview

Bootstrap 5 Tree View is a very simple plug-in for creating a basic and elegant Treeview using BS5. For use with Bootstrap 5, the attributes have been…

Leave a Reply

Your email address will not be published. Required fields are marked *