trippy css3 perspective hover animation for justintalbott.com

gistfile1.coffee

#= require jquery
#= require underscore
 
# pick randomly from an array
randomInArray = (arr) ->
  arr[Math.floor(Math.random()*arr.length)]
 
# interesting looking characters
bgChars = ["€","ç","∅","ξ","φ","ð","⊗","∴","∉","♣","¤","‰", "◊"]
 
# make a nested structure of <span>ed characters
fillBg = (i) ->
  char = randomInArray(bgChars)
  bgHtml = "<span>#{char}<span>#{char}<span>#{char}<span>#{char}<span>#{char}<span>#{char}</span></span></span></span></span></span>"
  $("#bg#{i}").html bgHtml
 
# make all 3 bg layers
makeBG = -> fillBg i for i in [1..3]
 
# prefix a css attribute declaration with vendor prefixes
vendorPrefix = (attr, v) ->
  o = {}
  o["-webkit-#{attr}"]=v
  o["-moz-#{attr}"]=v
  o["-ms-#{attr}"]=v
  o["#{attr}"]=v
  o
 
# set each bg layer's perspective origin and value based on an event positioned within the window
setPerspective = (e) ->
  x = e.pageX / window.innerWidth
  y = e.pageY / window.innerHeight
  $(".beejeez").css(vendorPrefix("perspective-origin","#{y*100}% #{x*100}%"))
  $("#bg1").css(vendorPrefix("perspective",(x*200)))
  $("#bg2").css(vendorPrefix("perspective",(y*200)))
  $("#bg3").css(vendorPrefix("perspective",(((x+y)/2)*200)))
 
 
# when the DOM is loaded and ready
$ ->
 
  # set the body ID to give it a random color scheme
  $("body").attr 'id', "c#{Math.floor(Math.random()*3)+1}"
 
  # make the bgs and make them again on clicking the button
  makeBG()
  $("a.style").click -> makeBG()
 
  # upon the mouse moving in the window, calculate the perspective values every 300ms
  $(window).mousemove (e) -> _.debounce setPerspective(e), 300
 
  # after 2 seconds, set a default perspective origin and value to all bg layers
  setTimeout ->
    $(".beejeez").css(vendorPrefix("perspective-origin","50% 50%"))
    $("#bg1").css(vendorPrefix("-webkit-perspective","600px"))
    $("#bg2").css(vendorPrefix("-webkit-perspective","600px"))
    $("#bg3").css(vendorPrefix("-webkit-perspective","600px"))
  , 2000