Skip to content

Instantly share code, notes, and snippets.

@pketh
Created December 1, 2015 00:32
Show Gist options
  • Save pketh/34abb1f1901096cab730 to your computer and use it in GitHub Desktop.
Save pketh/34abb1f1901096cab730 to your computer and use it in GitHub Desktop.
bouncy links (adapted from shauninman.com/pendium)
# 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment