Ripple Effect is a lightweight JavaScript library for adding Material Design-inspired ripple effects to DOM elements, providing simple, customizable visual interactions.

Examples

How to use

Use the attribute below to apply the effect:

Attribute Effect
data-ripples Applies the effect to the element
data-ripples="light" Sets the effect color to white (default)
data-ripples="dark" Sets the effect color to black

Usage

<button data-ripples>Try it here</button>
<button data-ripples="light">Try it here</button>
<button data-ripples="dark">Try it here</button>

Changing the defaults

Select the .ripple class inside an element with the data-ripples attribute. Every element with that attribute will have this style. 


              [data-ripples] > .ripple {
                background-color: #f8c555;
              }

To make the effect stronger or weaker, change the opacity:


              [data-ripples] > .ripple {
                opacity: 0.5;
              }

The default opacity is 0.16.

To make the effect faster or slower, change the animation duration:


              [data-ripples] > .ripple {
                animation-duration: 0.6s;
              }
            

              [data-ripples] > .ripple {
                animation-duration: 0.1s;
              }

The default duration is 0.3s.

Custom classes

Give your custom class a name and select the .ripple class inside it. 


              [data-ripples].ripples-purple > .ripple {
                background-color: #cc99cd;
              }
            
<button data-ripples class="ripples-purple">Try it here</button>

Download

Download with:

npm install @gabrielfins/ripple-effect

Import with:

import '@gabrielfins/ripple-effect';

Manual download

  1. Go to the project's GitHub arrow_outward
  2. Download the latest release
  3. Add the ripples.js file from the /dist folder to your project
  4. Import the file in your HTML with: 

              <script src="./your-path/ripples.js" defer></script>