Efeito de clique de pirulito (ondulação)

Clique para efetuar o Android Lollipop nos elementos

Provavelmente, você notou aquele efeito cascata (conhecido como ondulação ) quando clica em qualquer elemento em seu android.

Agora você pode implementá-lo em seu aplicativo muito rapidamente.

Você pode escolher entre duas maneiras simples de usar o recurso.

A primeira, as classes que você deseja adiconar o efeito que você pode inserir na .to-rippleclasse
A segunda é você escolhe o elemento que deseja animar, botão, o, li

Veja o código jQuery:

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");
});

Agora, você pode ver apenas a mágica do CSS:

.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);
  }
}

Só isso!

Veja-o funcionando ou use o Fork no GitHub .