Make star tails separate so that rotation works

poll.coffee

@@ -15,60 +15,61 @@ rand = (lbnd, ubnd) -> Math.round((Math.random() * (ubnd - lbnd)) + lbnd)
 
 # -- create stars in background --
 
-generate_star = ->
+star_tails = for _ in [1..numstars]
     size = rand min_star_size, max_star_size
     red_green = rand 180, 255
     x = rand 0, 100
     y = rand 0, 100
     star = document.createElement 'div'
-    star.style.backgroundColor = "rgb(#{red_green}, #{red_green}, 255)"
-    star.style.width = size + 'px'
-    star.style.height = size + 'px'
     star.style.right = x + '%'
     star.style.top = y + '%'
     document.getElementById('stars').appendChild star
-    star
-    # TODO: put tail in nested div for separate animation & rotation, and use
-    # the .star div as container so that it stays in place
 
-stars = (generate_star() for i in [1..numstars])
+    tail = document.createElement 'div'
+    tail.style.backgroundColor = "rgb(#{red_green}, #{red_green}, 255)"
+    tail.style.borderRadius = size / 2 + 'px'
+    tail.style.width = size + 'px'
+    tail.style.height = size + 'px'
+    star.appendChild tail
+
+    tail
 
 # -- state transitions --
 #
 # there are 3 states: cruising, excited and fullham
 
-# TODO: transition animations
-
 spaceship = document.getElementById 'spaceship'
 
-warp_spaceship = ->
-  console.log spaceship
-  Velocity spaceship, {left: '-=20%', top: '+=20%', }, {duration: 1000}
-  Velocity spaceship, {left: '+=45%', top: '-=45%', }, {duration: 400}
-  Velocity spaceship, {left: '-=25%', top: '+=25%', }, {duration: 1300}
-  for star in stars
-    amt = rand 0, 20
-    Velocity star, {right: "+=#{amt}%"}, {duration: 400}
-    Velocity star, 'reverse', {duration: 1000}
+star_heights = (tail.style.height for tail in star_tails)
 
-unwarp_spaceship = ->
+warp = ->
+  # first stretch stars to create accelerating feel
+  Velocity star_tails,
+    {width: '500px'},
+    {duration: 1000, easing: 'ease-in'}
 
-star_heights = (star.style.height for star in stars)
+  # then shift
+  for tail in star_tails
+    amt = rand 0, 20
+    Velocity tail, {right: "+=#{amt}%"}, {duration: 400}
+    Velocity tail, 'reverse', {duration: 1000}
 
-warp_stars = ->
-  Velocity stars,
-    {width: '50%'},
-    {duration: 1000, easing: 'ease-in'}
+  # while stars shift, the spaceship goes back a little bit, then launches
+  # speedily to the right and gradually moves back to the center
+  Velocity spaceship, {left: '-=20%', top: '+=20%', }, {duration: 1000}
+  Velocity spaceship, {left: '+=45%', top: '-=45%', }, {duration: 400}
+  Velocity spaceship, {left: '-=25%', top: '+=25%', }, {duration: 1300}
 
-unwarp_stars = ->
-  for star, i in stars
-    Velocity star,
+unwarp = ->
+  # unstretch stars
+  for tail, i in star_tails
+    Velocity tail,
       {width: star_heights[i]},
       {duration: 1000, easing: 'ease-in'}
 
 transitions =
-  cruising_excited: [warp_stars, warp_spaceship]
-  excited_cruising: [unwarp_stars]
+  cruising_excited: [warp]
+  excited_cruising: [unwarp]
 
 set_state = (newstate) ->
   oldstate = document.body.className
@@ -125,19 +126,3 @@ do ->
 
   #setInterval poll_exchange, poll_exchange_interval * 1000
   #setInterval poll_marketcap, poll_marketcap_interval * 1000
-
-#starels = document.getElementById('stars').getElementsByTagName 'div'
-#Velocity(starels, {translateX: [-1000, 0]}, {duration: 200, delay: 1000})
-
-#animate = ->
-#    spaceship = document.getElementById('spaceship')
-#    radius = 30
-#    duration = 4000
-#
-#    options =
-#        duration: duration / 4
-#        easing: 'ease-in-out'
-#
-#    Velocity(spaceship,
-#        { translateX: [-10, 10], translateY: [-10, 10] },
-#        { duration: 2000, loop: true })

style.less

@@ -52,14 +52,16 @@ img, div {
   width: 100%;
   height: 100%;
 
+  & > div {
     // FIXME: this should depend on the market and the client width/height
-  //transform: rotateZ(-25deg);
+    transform: rotateZ(-25deg);
 
     div {
+      right: 0;
       background-color: white;
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
+      width: 100%;
+      height: 100%;
+    }
   }
 }