bouncy links (adapted from shauninman.com/pendium)

bouncy.coffee

# bouncy links

$('a').each ->
  $(this).mousemove (e) ->
    if this.isAlreadyAnimating
      console.log 'still animating: ', this.isAlreadyAnimating
    else
      baseExpX = 4 # 2 ^ 4 == 16
      baseExpY = 2 # 2 ^ 4 == 16

      # element proportions
      w = this.offsetWidth
      h = this.offsetHeight
      hw = w/2
      hh = h/2

      t = $(this)

      offsets = t.offset() # element position relative to page
      pos = # mouse position relative to element
        x : e.pageX - offsets.left
        y : e.pageY - offsets.top

      # mouse position offset from center of element
      cx = pos.x - hw
      cy = pos.y - hh
      # percentage from center to edge
      px = Math.abs(cx/hw)
      py = Math.abs(cy/hh)

      # new top/left positions
      nx = Math.round(Math.pow(2, px * baseExpX)) * (cx < 0 ? -1 : 1)
      ny = Math.round(Math.pow(2, py * baseExpY)) * (cy < 0 ? -1 : 1)

      t.css
        zIndex: 10,
        left: nx + 'px',
        top: ny + 'px'

  $(this).mouseout (e) ->
    t = $(this)
    pos =
      x: parseInt(t.css('left'))
      y: parseInt(t.css('top'))

    this.isAlreadyAnimating = true
    console.log 'start animating'

    t.animate
      top: pos.y * -1
      left: pos.x * -1
    , 50, 'swing'
    .animate
      top: pos.y * 0.75
      left: pos.x * 0.75
    , 75, 'swing'
    .animate
      top: pos.y * - 0.5
      left: pos.x * - 0.5
    , 50, 'swing'
    .animate
      top: pos.y * 0.25
      left: pos.x * 0.25
    , 100, 'swing'
    .animate
      top: 0
      left: 0
    , 100, 'swing', () ->
      console.log 'done animating'
      this.isAlreadyAnimating = false