ripple.js.coffee

ripple = (el, color) ->
  $div = $('<div/>')
  elOffset = el.offset()
    xPos = elOffset.left
    yPos = elOffset.top
    $div.addClass 'ripple-effect'
    $ripple = $('.ripple-effect')
    $ripple.css 'height', el.height()
    $ripple.css 'width', el.height()
    $div.css(
      top: yPos - ($ripple.height() / 2)
      left: xPos - ($ripple.width() / 2)
      background: color)
    .appendTo(el)
    window.setTimeout (->
      $div.remove()
      return
    ), 2000
    return

ripple.sass

.ripple-effect
  border-radius: 50%
  width: 50px
  height: 50px
  background: white
  animation: new-ripple-animation 2s
  -webkit-animation: ripple-animation 2s
  @keyframes ripple-animation
  from
    transform: scale(1)
    -webkit-transform: scale(1)
    opacity: 1
  to
    transform: scale(100)
    -webkit-transform: scale(100)
    opacity: 0

@-webkit-keyframes ripple-animation
  from
    transform: scale(1)
    -webkit-transform: scale(1)
    opacity: 1
  to
    transform: scale(100)
    -webkit-transform: scale(100)
    opacity: 0