Material Design

index.html

<div class="box" data-ripple></div>
<div class="box" data-ripple="#C82754" data-ripple-wipe></div>

Material-Design.markdown

Material Design

Based off of googles Material design a small code snippet to allow you to put the ripple effect on any element with the ability to specify a color or just use the default.

A Pen by Tyler Benton on CodePen.

License.

script.js

/*$(document).ready(function(){
  $("[data-ripple]").on("click", function(e){
    var $obj = $(this), 
        bg = $obj.attr("data-ripple") ? "background: " + $obj.attr("data-ripple") + ";": "",
        x = ~~(e.pageX - $obj.offset().left - 200),
        y = ~~(e.pageY - $obj.offset().top - 200);
    
    $obj.find(".ripple").remove();
    
    $obj.append("<div class='ripple' style='" + bg + "top: " + y + "px; left: " + x + "px;'></div>");
  });
  
});*/




// pure js
(function(){
  var rippleContainer = document.querySelectorAll("[data-ripple]"),
      isTouch = (("ontouchstart" in window) || (window.DocumentTouch && document instanceof DocumentTouch) || (navigator.MaxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)),
      pointers,
      touch = {
        start: "touchstart",
        move: "touchmove", 
        end: "touchend"
      },
      mouse = {
        start: "mousedown",
        move: "mousemove",
        end: "mouseup"
      },
      pointer = isTouch ? touch : mouse;
  
  for(var i = 0; i < rippleContainer.length; i++){
   rippleContainer[i].addEventListener(pointer.start, startEvent, false); 
    
   rippleContainer[i].addEventListener(pointer.end, endEvent, false);  
  }
   
  function startEvent(e){
    var obj = this,
        bg = obj.getAttribute("data-ripple"),
        pageX = isTouch ? e.touches[0].pageX : e.pageX,
        pageY = isTouch ? e.touches[0].pageY : e.pageY,
        x = ~~(pageX - obj.offsetLeft - 25),
        y = ~~(pageY - obj.offsetTop - 25),
        ripple = document.createElement("div");
    
     ripple.classList.add("ripple");
     ripple.style.top = y + "px";
     ripple.style.left = x + "px";
     if(bg) ripple.style.background = bg;
     obj.appendChild(ripple);
  }
  
  function endEvent(e){
    var ripple = this.querySelectorAll(".ripple");
    for(var i = 0; i < ripple.length; i++){
      ripple[i].classList.add("animate");
      setTimeout(function(){
        ripple[i].parentNode.removeChild(ripple[i]);
      }, 2000);
    }
  }
  
})();

style.scss

@import "compass/css3";
*{
  box-sizing: border-box;
  &:before, &:after{
    box-sizing: inherit;
  }
}
html, body{
  background-color: #e2e2e2;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

.box{
  background: #585555;
  border-radius: 20px;
  height: 200px;
  margin: 20px;
  width: 200px;
}

[data-ripple]{
  overflow: hidden;
  position: relative;
  transform-style: preserve-3d;
  .ripple{
    background-color: #fff;
    border-radius: 100%;
    height: 50px;
    opacity: .5;
    position: absolute;    
    transform: scale(1);
    width: 50px;
    &.animate{
      animation: ripple .75s ease-in;
      animation-fill-mode: forwards;
    }
  }
  &[data-ripple-wipe] .ripple.animate{
    animation: ripple-wipe .75s ease-in;
    animation-fill-mode: forwards; 
    opacity: 1;
  }
}


@keyframes ripple{
  100%{
    opacity: 0;
    transform: scale(50);
  }
}
@keyframes ripple-wipe{
  100%{
    transform: scale(50);
  }
}