.layer.layer1
  p Drag Me
.layer.layer2
.layer.layer3
.layer.layer4
.layer.layer5

$color0: #FCFFF5
$color1: #FFFFFF
$color2: #193441
$color3: #3E606F
$color4: #91AA9D
$color5: #D1DBBD

html, body
  background: $color0

.layer
  top: 50%
  left: 50%
  border-radius: 50%
  position: absolute
  box-shadow: 0 6px 5px rgba(0,0,0,.4)

.layer1
  z-index: 4
  cursor: move
  width: 100px
  height: 100px
  background: $color1
  margin: -50px 0 0 -50px
  p
    color: #000
    text-align: center
    -webkit-user-select: none
    font: 14px/100px 'TrebuchetMS', trebuchet, sans-serif

.layer2
  z-index: 3
  width: 150px
  height: 150px
  background: $color2
  margin: -75px 0 0 -75px
  
.layer3
  z-index: 2
  width: 200px
  height: 200px
  background: $color3
  margin: -100px 0 0 -100px
  
.layer4
  z-index: 1
  width: 250px
  height: 250px
  background: $color4
  margin: -125px 0 0 -125px
  
.layer5
  z-index: 0
  width: 300px
  height: 300px
  background: $color5
  margin: -150px 0 0 -150px

dragging = false
layer1 = '.layer1'
layer2 = '.layer2'
layer3 = '.layer3'
layer4 = '.layer4'
layer5 = '.layer5'

startX = null
startY = null
currX = 0
currY = 0

moveEl = (el, newX, newY) ->
  el.css
    x: newX 
    y: newY
  return

moveBack = (el) ->
  el.stop().transition
    x: 0
    y: 0
  return

$(document).on 'mousedown', layer1, (e) ->
  startX = e.pageX
  startY = e.pageY
  currX = parseInt $(layer1).css('x')
  currY = parseInt $(layer1).css('y')
  dragging = true
  return

$(document).on 'mousemove', layer1, (e) ->
  return if !dragging
  mouseX = e.pageX
  mouseY = e.pageY
  diffX = currX + (mouseX - startX)
  diffY = currY + (mouseY - startY)
  moveEl($(layer1), diffX, diffY)
  moveEl($(layer2), diffX * .8, diffY * .8)
  moveEl($(layer3), diffX * .6, diffY * .6)
  moveEl($(layer4), diffX * .4, diffY * .4)
  moveEl($(layer5), diffX * .2, diffY * .2)
  return

$(document).on 'mouseup mouseleave mousecancel', layer1, () ->
  dragging = false
  moveBack($(layer1))
  moveBack($(layer2))
  moveBack($(layer3))
  moveBack($(layer4))
  moveBack($(layer5))
  return