Riddle Animate

javascript.js

var parent, ink, d, x, y;
$(".riddle-animate").click(function(e){
	parent = $(this).parent();
	//create .ink element if it doesn't exist
	if(parent.find(".ink").length == 0)
		parent.prepend("<span class='ink'></span>");
		
	ink = parent.find(".ink");
	//incase of quick double clicks stop the previous animation
	ink.removeClass("animate");
	
	//set size of .ink
	if(!ink.height() && !ink.width())
	{
		//use parent's width or height whichever is larger for the diameter to make a circle which can cover the entire element.
		d = Math.max(parent.outerWidth(), parent.outerHeight());
		ink.css({height: d, width: d});
	}
		
	//get click coordinates
	//logic = click coordinates relative to page - parent's position relative to page - half of self height/width to make it controllable from the center;
	x = e.pageX - parent.offset().left - ink.width()/2;
	y = e.pageY - parent.offset().top - ink.height()/2;
		
	//set the position and add class .animate
	ink.css({top: y+'px', left: x+'px'}).addClass("animate");
});

style.css

.ink {
    display: block; position: absolute;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 100%;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}
/*animation effect*/
.ink.animate {
    -webkit-animation: ripple 0.65s linear;
    -moz-animation: ripple 0.65s linear;
    -o-animation: ripple 0.65s linear;
    animation: ripple 0.65s linear;
}
@-webkit-keyframes ripple {
    100% { opacity: 0; -webkit-transform: scale(2.5); }
}
@-moz-keyframes ripple {
    100% { opacity: 0; -moz-transform: scale(2.5); }
}
@-o-keyframes ripple {
    100% { opacity: 0; -o-transform: scale(2.5); }
}
@keyframes ripple {
    /*scale the element to 250% to safely cover the entire link and fade it out*/
    100% { opacity: 0;  transform: scale(2.5); }
}


.shadow {
    z-index: 99;
    box-shadow:rgba(0, 0, 0, 0.3) 0 16px 16px 0;
    -webkit-box-shadow:rgba(0, 0, 0, 0.3) 0 16px 16px 0;
    -moz-box-shadow:rgba(0, 0, 0, 0.3) 0 16px 16px 0;
}
.short-shadow {
    z-index: 99;
    box-shadow:rgba(0, 0, 0, 0.3) 0 8px 8px 0;
    -webkit-box-shadow:rgba(0, 0, 0, 0.3) 0 8px 8px 0;
    -moz-box-shadow:rgba(0, 0, 0, 0.3) 0 8px 8px 0;
}