mnmtmnr
1/28/2015 - 12:07 PM

Click Animation

Click Animation

body
  background #3F72FE
  font-family monospace

i
  position absolute
  height 60px
  width 60px
  background #fff
  margin -30px
  border-radius 100%
  opacity 1
  transform scale(0)
  z-index 9999
  &.active
    transition transform 400ms ease, opacity 400ms ease
    opacity 0
    transform scale(1)

span
  position absolute
  top 50%
  left 50%
  transform translate(-50%,-50%)
  font-size 18px
  color rgba(255,255,255,.8)
  letter-spacing .1em
  transition none
$("html").on "mousedown", (e) ->
  $("i").addClass("active").css("left", (e.pageX)).css "top", (e.pageY)
  $("span").html("X:" + (e.pageX) + "px  Y:" + (e.pageY))

$("i").bind "transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", ->
  $("i").removeClass "active"
<i></i>

<span>click anywhere</span>