ripple effect design

As Android L material design has became a new UI inspiration, tried the same ripple effect of Android L in HTML5 and CSS3 using simple animations. So lets get started,

Download Code

First, Create a button markup and bind a click event listener using jquery.

<button class="ripple">AskorB</button>

Now, on clicking, we declare a ‘$div’ variable, and gets its offset. Then, we calculate the position of cursor by event.pageX and event.pageY from button position.

$('.ripple').on('click', function (event) {
event.preventDefault();

var $div = $('<div/>'),
btnOffset = $(this).offset(), //get position of div

//get cursor position
xPos = event.pageX - btnOffset.left,
yPos = event.pageY - btnOffset.top;

//add animation class
$div.addClass('ripple-effect');
var $ripple = $(".ripple-effect");

//set the hight & width of the animation class

$ripple.css("height", $(this).height());
$ripple.css("width", $(this).height());
$div
.css({
top: yPos - ($ripple.height()/2),
left: xPos - ($ripple.width()/2),
background: $(this).data("ripple-color")
})
.appendTo($(this));

window.setTimeout(function(){
$div.remove();
}, 2000);
});

Then the final part is, add CSS3 animation class for its height and width. Finish the animation is 2 seconds.

textpop-up

@keyframes ripple-animation {
from {
transform: scale(1);
opacity: 0.4;
}
to {
transform: scale(100);
opacity: 0;
}
}