Skip to content

Instantly share code, notes, and snippets.

@waymondo
Created December 20, 2012 16:52
Show Gist options
  • Save waymondo/4346664 to your computer and use it in GitHub Desktop.
Save waymondo/4346664 to your computer and use it in GitHub Desktop.
trippy css3 perspective hover animation for justintalbott.com
#= 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment