How can I prevent this material ripple animation from leaking out into other div?

Question

In the following codepen, the creator has made a material ripple effect. However there is an issue where if I add another div right next to the original the ripple will leak into it.

What should I do to change to code so that the ripple will only be contained in the div that it was activated on?

I have tried editing the JS so that the click function only activates for divs with the class ".rippleDiv" but that did not work either.

Link to codepen http://codepen.io/Ruddy/pen/09052b957d82a17bd6ca70ac6663dd6a

HTML

<div class="rippleDiv">Button</div>
<div>Button 2</div>

CSS

div {
  width: 220px;
  height: 120px;
  background: #222;
  color: #fff;
  text-align: center;
  line-height: 120px;
  font-size: 40px;
}

/*  Ripple */

.ripple {
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  position: absolute;
  opacity: 1;
}
.rippleEffect {
    animation: rippleDrop .6s linear;
}

@keyframes rippleDrop {
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

JS

$(".rippleDiv").click(function (e) {

  // Remove any old one
  $(".ripple").remove();

  // Setup
  var posX = $(this).offset().left,
      posY = $(this).offset().top,
      buttonWidth = $(this).width(),
      buttonHeight =  $(this).height();

  // Add the element
  $(this).prepend("<span class='ripple'></span>");


 // Make it round!
  if(buttonWidth >= buttonHeight) {
    buttonHeight = buttonWidth;
  } else {
    buttonWidth = buttonHeight; 
  }

  // Get the center of the element
  var x = e.pageX - posX - buttonWidth / 2;
  var y = e.pageY - posY - buttonHeight / 2;


  // Add the ripples CSS and start the animation
  $(".ripple").css({
    width: buttonWidth,
    height: buttonHeight,
    top: y + 'px',
    left: x + 'px'
  }).addClass("rippleEffect");
});

Kit Kit · Accepted Answer · 2017-01-25T16:34:11

The basic answer is that the 'ripple' element needs to be contained inside a div that has overflow:hidden set.

However to get this right, a number of small changes need to be made so that both the original button content, as well as the ripple itself, are correctly positioned, mainly using divs with the correct positioning attributes set.

So - here are the changes I made to get this to work: http://codepen.io/kitr/pen/xgLQpM

HTML:

<div>Button</div>
<div>Button 2</div>

CSS:

div {
  width: 220px;
  height: 120px;
  background: #222;
  color: #fff;
  text-align: center;
  line-height: 120px;
  font-size: 40px;
  position:relative;
  overflow:hidden;
}

/*  Ripple */

.ripple {
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  opacity: 1;
}
.rippleEffect {
    animation: rippleDrop .6s linear;
    position: absolute;
}

@keyframes rippleDrop {
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

Javascript:

$("div").click(function (e) {

  // Remove any old one
  $(".ripple").remove();

  // Setup
  var posX = $(this).offset().left,
      posY = $(this).offset().top,
      buttonWidth = $(this).width(),
      buttonHeight =  $(this).height();

  // Add the element
  $(this).append("<div class='ripple'></div>");


 // Make it round!
  if(buttonWidth >= buttonHeight) {
    buttonHeight = buttonWidth;
  } else {
    buttonWidth = buttonHeight; 
  }

  // Get the center of the element
  var x = e.pageX - posX - buttonWidth / 2;
  var y = e.pageY - posY - buttonHeight / 2;


  // Add the ripples CSS and start the animation
  $(".ripple").css({
    width: buttonWidth,
    height: buttonHeight,
    top: y + 'px',
    left: x + 'px'
  }).addClass("rippleEffect");
});

How can I prevent this material ripple animation from leaking out into other div?

1 Answers