Skip to content
Snippets Groups Projects
Commit 01829ee6 authored by Taddeüs Kroes's avatar Taddeüs Kroes
Browse files

Make star tails separate so that rotation works

parent 5745b898
No related branches found
No related tags found
No related merge requests found
......@@ -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 })
......@@ -52,14 +52,16 @@ img, div {
width: 100%;
height: 100%;
// FIXME: this should depend on the market and the client width/height
//transform: rotateZ(-25deg);
div {
background-color: white;
width: 10px;
height: 10px;
border-radius: 50%;
& > div {
// FIXME: this should depend on the market and the client width/height
transform: rotateZ(-25deg);
div {
right: 0;
background-color: white;
width: 100%;
height: 100%;
}
}
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment