$('body').on( 'click', '.ripple-effect', function(e){ // Cache the selector var the_dom = $(this); // Sometimes the clicked element != the limit of the ripple effect. We'll talk about it later below var the_dom_limit = the_dom; // Get the click and the clicked element offsets var the_dom_offset = the_dom_limit.offset(); var click_x = e.pageX; var click_y = e.pageY; // Get the width and the height of clicked element var the_dom_width = the_dom_limit.outerWidth(); var the_dom_height = the_dom_limit.outerHeight(); // Draw the ripple effect wrap var ripple_effect_wrap = $('<span class="ripple-effect-wrap"></span>'); ripple_effect_wrap.css({ 'width' : the_dom_width, 'height' : the_dom_height, 'position' : 'absolute', 'top' : the_dom_offset.top, 'left' : the_dom_offset.left, 'z-index' : 100, 'overflow' : 'hidden', 'background-clip' : 'padding-box' }); // Append the ripple effect wrap ripple_effect_wrap.appendTo('body'); // Determine the position of the click relative to the clicked element var click_x_ripple = click_x - the_dom_offset.left; var click_y_ripple = click_y - the_dom_offset.top; var circular_width = 1000; // Draw the ripple effect var ripple = $('<span class="ripple"></span>'); ripple.css({ 'width' : circular_width, 'height' : circular_width, 'background' : 'rgba(0,0,0,0.3)', 'position' : 'absolute', 'top' : click_y_ripple - ( circular_width / 2 ), 'left' : click_x_ripple - ( circular_width / 2 ), 'content' : '', 'background-clip' : 'padding-box', '-webkit-border-radius' : '50%', 'border-radius' : '50%', '-webkit-animation-name' : 'ripple-animation', 'animation-name' : 'ripple-animation', '-webkit-animation-duration' : '2s', 'animation-duration' : '2s', '-webkit-animation-fill-mode' : 'both', 'animation-fill-mode' : 'both' }); $('.ripple-effect-wrap:last').append( ripple ); // Remove rippling component after half second setTimeout( function(){ ripple_effect_wrap.fadeOut(function(){ $(this).remove(); }); }, 500 ); });
<div class="box ripple-effect"></div>
/* box styling */ .box{ display: block; width: 200px; height: 200px; background: #E91E63; margin-bottom: 2em; cursor: pointer; content: ''; } /* Ripple effect */ @-webkit-keyframes ripple-animation { 0% { -webkit-transform: scale(.01); transform: scale(.01); } 100% { -webkit-transform: scale(5); transform: scale(5); } } @keyframes ripple-animation { 0% { -webkit-transform: scale(.01); transform: scale(.01); } 100% { -webkit-transform: scale(5); transform: scale(5); } }