JSFiddle - React, Tailwind, and code Playground

by Ravindra Athreya

HTML

<div class="box ripple-effect"></div>

CSS

/* 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);
  }     
}

JavaScript

$('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...