Animated Solar System Site Navigator

[John]

Hello!

I considered posting this under "I Need Help", but it's not so much that I NEED help... I just had this idea and as always I have no idea what I'm doing so I wanted to present what I came up with and ask if there's a better solution. : D





Basically, this is going to be just a page to list my several web projects, but I wanted to make it look like a solar system with each planet linking to one of my websites. My solution is to make offset images rotate. For me that means painstakingly altering offset and position values until the orbits more or less align. It's a lot of work and the results aren't perfect, so I was wondering if any of you people who actually know what you're doing see an obvious solution for all my problems. And if not, I hope you still enjoy my new silly project.

[Dan Q]

Do you mean something like this? This gives the inner planet a "day" of 8s and the outer one a "day" of 12s:

Code

.planetcastle a img {
  animation: axisRotate 12s infinite linear;
}

.planethp a img {
  animation: axisRotate 8s infinite linear;
}

@keyframes axisRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

If I were you, I'd also consider making planets slightly easier to click by pausing their orbits when they're hovered. I did this very-basically like this:

Code

.planethp:has(a:hover),
.planetcastle:has(a:hover) {
  animation-play-state: paused;
}

However, this only stops the planet and not the name on its orbit ring. It'd be nice to stop both. Perhaps you could wrap each planet and its ring in a super-element and then attach CSS to that; something like this:

Code

<!-- wrap EACH orbit in an orbit-wrapper -->
<div class="orbit-wrapper">
  <!-- make both animated parts of the orbit gain a second class, orbit-part -->
  <div class="planethp orbit-part">
    <img width="400px" src="orpbit_hp.png">
  </div>
  <div class="planethp orbit-part">
     ...
  </div>
</div>

This would let you do something like this to pause both at the same time:

Code

/* When a link in an orbit-wrapper is hovered, pause all animations on orbit-parts within that orbit-wrapper: */
.orbit-wrapper:has(a:hover) .orbit-part {
  animation-play-state: paused;
}

Those would be my next steps, I think!

This is looking amazing, BTW. You're doing great work!

[Dan Q]

But to answer your actual question: you're doing exactly the way I'd do this. You might be able to do something "fancier" using JavaScript and some maths, but CSS is a way superior solution and it looks great.

[John]

Thank you so much, @DanQ; for your kind words as well as your valuable input. Sorry about the late reply! I wanted to test your suggestions (and another idea I came up with) before answering, so I'd actually have something to report.^^

1. I hadn't thought of axial rotation until you suggested it! I added it and it looks cool ... but for some reason it's much more nausea-inducing for me? : D Would love to hear if anyone else feels that way. There was already a lot of rotation before, but somehow this might be one step too far?

2. The idea to stop the rotation on hover sounds elegant. If I'd do it, I would probably make EVERYTHING stop, though, and that would mess with another idea I'm planning to implement later, so I won't make the rotation stop for now. I think the planets are slow enough that it's not really necessary.
EDIT: I just realised that that's nonsense. I can just make all the planets and moons stop spinning without including the element I was talking about. So, I think I might implement that stop-on-hover-idea after all. That would also help with reading the tool tips ...

3. I had an idea for a potentially unconventional way of implementing a "styled CSS-based tool tip", if anyone would like to check that out. : P Is that solution stupid for some reason I didn't consider?

[stephan_e_perez]

2. The idea to stop the rotation on hover sounds elegant. If I'd do it, I would probably make EVERYTHING stop, though, and that would mess with another idea I'm planning to implement later, so I won't make the rotation stop for now. I think the planets are slow enough that it's not really necessary.
EDIT: I just realised that that's nonsense. I can just make all the planets and moons stop spinning without including the element I was talking about. So, I think I might implement that stop-on-hover-idea after all. That would also help with reading the tool tips ...

It looks cool! And yes, I think you should stop the animation for a hovered object and any of its children. Then, the other bodies can still continue to move without freezing your whole page. If you use CSS keyframes, it should be simply as something like this:

Code: css

.heavenly-body:hover, .heavenly-body:hover .heavenly-body /*target both hovered object and any children*/
{
    animation-play-state: paused;
}