Material Design Ripple Effects In Vanilla JavaScript – rippleJS

Category: Animation , Javascript | September 24, 2018
Author:
Views Total: 3,154
Official Page: Go to website
Last Update: September 24, 2018
License: MIT

Preview:

Material Design Ripple Effects In Vanilla JavaScript – rippleJS

Description:

A pure vanilla JavaScript solution to create Material Design inspired interactive ripple click effects on any DOM element.

How to use it:

Include the ripple.css for default ripple styles.

<link href="ripple.css" rel="stylesheet">

Apply the ripple click effect to a DIV element.

<div class="demo">
  <div class="rippleJS fill"></div>
</div>

Apply the ripple click effect to a button element.

<button class="yourButton">
  Click Me
  <link class="rippleJS">
</button

Apply the ripple click effect to a checkbox.

<label class="optHolder">
  <input type="checkbox" checked="checked">
  <link class="rippleJS fill">
</label>

Customize the ripples in your own CSS.

.rippleJS .ripple {
  background: red;
}

Changelog:

09/24/2018

  • v1.0.6

08/04/2018

  • v1.0.5

03/25/2016

  • insert css at very top, allow overriding

You Might Be Interested In:


One thought on “Material Design Ripple Effects In Vanilla JavaScript – rippleJS

  1. Abhishek Sharma

    Thanks this was very helpful!! This is in pure JavaScript. I appreceate

    Reply

Leave a Reply