A Pen by Riley Shaw.

Flat-shadow-mouse-tracker.markdown

Flat shadow mouse tracker

Inspired by cdpn.io/fqHJI

A Pen by Riley Shaw on CodePen.

License.

index.slim

#vcent
h1 Shadows!

script.coffee

h1 = $('h1')
cx = cy = 0

setOffsets = () ->
  cx = h1.offset().left + h1.width() / 2
  cy = h1.offset().top + h1.height() / 2

$(window).on
  'mousemove': (e) ->
    mx = e.clientX
    my = e.clientY
    dx = cx - mx
    dy = cy - my
    console.log mx, my, cx, cy
    h1.css 'text-shadow', "#{dx/50}px #{dy/50}px #16a085"
  'load': setOffsets
  'resize': setOffsets

style.sass

@import "compass"
body, html, #vcent
  height: 100%

body, html
  width: 100%

body
  text-align: center
  background-color: #1abc9c
    
#vcent, h1
  display: inline-block
  vertical-align: middle

h1
  font: bold 80px sans-serif
  text-transform: uppercase
  color: #ecf0f1