A simple, standalone, and customizable Material Design surface reaction implementation.
• Demo •
No dependencies: Ripples is standalone and requires absolutely no dependencies. This makes the whole asset size
< 6KBnon-minified, and non-gzipped!
Keyboard support: Ripples has support for
Faithful to the source: Ripples was mainly created as a simple and standalone implementation of the Material Design ripples (check
/demo). As a result, you'll see things like:
Multiple ripples: Every click generates a reaction as you'd expect. No more single-ripple animation resets before they actually finish.
Proper clipping on all elements.
You can use it in one of two ways:
You can add
style.cssin your HTML, e.g.:
<link rel="stylesheet" href="ripples/style.css"/> <script src="ripples/script.js"></script>
Then use it from global scope (
Or you can just add
style.cssto your project tree and then
require()it as a module (e.g.
To use Ripples:
First, add a
rippleclass to the DOM elements you want the ripples added to, e.g.:
Ripples.init()when the page/app is ready.
Warning: Ripples work on all elements except void elements. If you want ripples to be added to a void element, you must wrap it in, say, a
<div class="ripple"> <img src="photo.jpg"/> </div>
Tip: Ripples uses a minimal stylesheet to style the ripples. The only styling Ripples add to your element is
position: relative, which is necessary for the ripples to work in all situations. The rest in
style.css is styling the actual ripple circles.
Ripples currently supports the following customization:
You can customize the ripple color in a
data-ripple-color element attribute:
<button class="ripple" data-ripple-color="rgba(0, 0, 0, 0.5)">Hello!</button>
You can use any CSS-compatible format (e.g.:
hsla(), hexadecimal, ...etc).
You can customize the ripple opacity in a
data-ripple-opacity element attribute:
<button class="ripple" data-ripple-opacity="0.25">Hello!</button>
A use-case of this attribute is when you want to keep your markup clean. So you can use a simple
black, but still customize the opacity, in a non-
hsla() way, which looks a bit cleaner in markup:
<button class="ripple" data-ripple-color="black" data-ripple-opacity="0.25"> Hello! </button>
Issues and pull requests are always welcome.
© Copyright 2017 Hazem AbuMostafa.
This project is subject to the Apache License, Version 2.0.