Author: | idiotWu |
---|---|
Views Total: | 12,330 views |
Official Page: | Go to website |
Last Update: | August 7, 2014 |
License: | MIT |
Preview:

Description:
Just another approach to create a famous Android L & Google Material Design styled ripple effect using Javascript and CSS3. Created by idiotWu.
How to use it:
Creat an UI button that you want to apply a ripple effect when clicked on.
<button>BUTTON</button>
The sample CSS to style the UI button following Material Design.
button { position: relative; display: block; width: 13em; height: 3em; margin: 2em; border: none; outline: none; letter-spacing: .2em; font-weight: bold; background: #dfdfdf; cursor: pointer; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-radius: 2px; }
The required CSS rules to create the ripple effect using CSS3 animations.
.ripple { position: absolute; background: rgba(0,0,0,.25); border-radius: 100%; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); pointer-events: none; } .ripple.show { -webkit-animation: ripple .5s ease-out; animation: ripple .5s ease-out; } @-webkit-keyframes ripple { to { -webkit-transform: scale(1.5); transform: scale(1.5); opacity: 0; } } @keyframes ripple { to { -webkit-transform: scale(1.5); transform: scale(1.5); opacity: 0; } }
A little Javascript to enable the ripple effect.
var addRippleEffect = function (e) { var target = e.target; if (target.tagName.toLowerCase() !== 'button') return false; var rect = target.getBoundingClientRect(); var ripple = target.querySelector('.ripple'); if (!ripple) { ripple = document.createElement('span'); ripple.className = 'ripple'; ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px'; target.appendChild(ripple); } ripple.classList.remove('show'); var top = e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop; var left = e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft; ripple.style.top = top + 'px'; ripple.style.left = left + 'px'; ripple.classList.add('show'); return false; } document.addEventListener('click', addRippleEffect, false);