Solar System Animation banner

Solar System Animation

Created by: Sadiya
6 devlogs
2h 49m 5s

This is a simple web based solar system visual where users can see the planets orbit around the sun in a circular motion.

This project uses AI

I only used AI (ChatGPT) to understand how z-index and hover effects work

Demo Repository

README

Loading README...
Sadiya
Sadiya shipped Solar System Animation
about 2 hours ago

Shipped this project!

I built a web-based solar system animation where planets orbit the sun . The project includes hover effects and a starry background along with the planets in the center. Through this project, I learned how CSS animation work and how z-index work in positioning and layering elements.

Sadiya
Sadiya worked on Solar System Animation
about 2 hours ago
1h 11m logged

What I added

  • I added a hover effect on the planets where every time a user goes over it shows a color
0
Sadiya
Sadiya worked on Solar System Animation
2 days ago
0h 32m logged

What I changed

  • I changed the image of Saturn after seeing that it has rings
Attachment
Attachment
0
Sadiya
Sadiya worked on Solar System Animation
3 days ago
0h 16m logged

What did I do

  • Nothing was added or removed just spaced out the brackets
0
Sadiya
Sadiya worked on Solar System Animation
3 days ago
0h 15m logged

What have I done so far in CSS

  • I worked on adding the visual representations of the planets
  • Instead of placing all of the images in the HTML, I did it in CSS with ::before, I repeated this way for all of the planets includes Venus, Earth, Jupiter, Saturn, Uranus, Neptune, and Pluto
  • I also added a keyframe for the animations
0
Sadiya
Sadiya worked on Solar System Animation
3 days ago
0h 15m logged

What have I done so far in CSS

  • I worked on positioning the planets and making them orbit around the sun
  • For the moon I positioned it inside the earth and gave it it’s own animation. This allows it to orbit around the earth instead of the sun
Attachment
0
Sadiya
Sadiya worked on Solar System Animation
3 days ago
0h 18m logged

What I have done so far

  • I created the basic structure with HTML by adding containers that hold the sun and all of the planets. I also placed the moon in side of the earth so it can orbit around it.
  • In CSS, I centered everything on the screen and made it black. I also added a glow effect on the sun. (I am not done with the css yet)
  • In JS, I wrote a function where it generates 1000 stars and places it randomly across the screen.
    (I am trying to explain my process)
Attachment
0