Lollipop Click Effect (ripple)

#keyframes

#transform

#android

#lollipop

#ripple

#on-animate

Click to effect the Android Lollipop within the elements

Probably you have noticed that ripple effect (known as ripple) when you click any element in your android.

Now you can implement it in your application very quickly.

You can choose from two simple ways to use the feature.

The first, the classes you want adiconar the effect you can enter the .to-ripple class
The second is you choose the element you want to animate, button, the, li

See the jQuery code:

var element = 'li a, button, .to-ripple',
    current,
    ripple,
    d,
    x,
    y;

// Detect element click
$(element).click(function (e) {

  current = $(this);

  // .ripple creates the element if there is no exists
  if (current.find(".ripple").length === 0) {

    // Parent prepares to receive the .ripple element
    current.addClass('prepare-ripple');

    // .ripple insert the element content
    current.prepend("<span class='ripple'></span>");
  }
  // Sets the .ripple created in a variable
  ripple = current.find(".ripple");

  // In case of fast double-clicks to the previous animation
  ripple.removeClass("on-animate");

  // Sets the size of .ripple
  if (!ripple.height() && !ripple.width()) {

    // Use the width or height of the parent
    // What is greater to make a circle that can cover the entire element.
    d = Math.max(current.outerWidth(), current.outerHeight());

    ripple.css({
      height: d,
      width: d
    });
  }

  // Coordinated click
  // Logic = coordinates in relation to page
  // - Parent's position relative to the page  
  x = e.pageX - current.offset().left - ripple.width() / 2;
  y = e.pageY - current.offset().top - ripple.height() / 2;

  // Sets the position and adds .on-animate class
  ripple.css({
    top: y + 'px',
    left: x + 'px'
  }).addClass("on-animate");
});

Now, you can see only the CSS magic:

.prepare-ripple {
  overflow: hidden;
  position: relative;
  outline:0;
}
.ripple {
  display: block; 
  position: absolute;
  background: rgba(255, 255, 255, .3);
  border-radius: 100%;
  transform: scale(0);
}
.ripple.on-animate {
  animation: ripple 0.65s linear;
}
@keyframes ripple {
  100% {
    opacity: 0; 
    transform: scale(2.5);
  }
}