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.