Link in the source
The blue box is the jupiter's orbit.
https://www.youtube.com/watch?v=3fnX7HZ5...
I actually tried to do something similar to this, but with relative correct dimensions (i.e., a medium sized moon is 1px, and everything else is scaled from that. Of course, at those dimensions, the actual page would be a mile or so long, so having everything rotate (as you've done) is not feasible. Unfortunately, with ANY large spinny object thing (that's the technical term, I believe), you're going to run into the battle between keeping stuff visible (i.e., large enough to see), and keeping it from breaking the page.
Perhaps have arrows at the edge of the page (in JS) that 'point' to offscreen objects? That way the user knows they're THERE, but they don't have to make the effort of scrolling to find them.
Hmm what I would suggest is adding a media query (css). However, I am not entirely sure that will resolve your issue as part of the problem is the orbit of the planets that is forcing the resolution change. To be honest with you I would suggest posting this on stackoverflow since you'll probably get a better answer.
I don't have an answer to your problem, but I just wanted to say that what you've done so far is very cool.
Now, can you add moons to each planet? That would be totally off the wall!
Good luck finding a solution, but I just wanted to comment that so far, this is excellent.
N
Here it is: http://daneh.siteground.net/space.html
I am testing it on a mac and what I see is that the scroll bars keep going up and down as Jupiter moves. Is there anyway to this stop and make the site a certain size using only javascript, css, and html?
Second I have code to make the background tile but it wont. How do I fix that?
Thank you!
