From 5f5b2cf3b8e591a1984a39af26da00734ace638f Mon Sep 17 00:00:00 2001 From: BUTURUM Date: Wed, 26 Nov 2025 18:32:38 +0000 Subject: [PATCH 1/2] feat: add project solar system lesson --- .../animation/project_solar_system.md | 39 +++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 advanced_html_css/animation/project_solar_system.md diff --git a/advanced_html_css/animation/project_solar_system.md b/advanced_html_css/animation/project_solar_system.md new file mode 100644 index 00000000000..da5917d15e6 --- /dev/null +++ b/advanced_html_css/animation/project_solar_system.md @@ -0,0 +1,39 @@ +### Introduction + +In this project-lesson we will use CSS animation and transition to build animated and intractable solar system model. All this with barely any JavaScript - isn't that amazing?! + +### Solar system projection + +Our [solar system](https://en.wikipedia.org/wiki/Solar_System) consist of the sun and 8 planets. All those cosmic bodies have unique properties (e.g. size, orbit radius, orbital speed, etc). There is little to no value in projecting those properties with 100% accuracy. In fact it can make model unusable in some cases. Thus go with whatever is beautiful as long as it makes sense: Saturn still should be bigger than mercury and mars shouldn't be blue, also don't add Pluto. + +
+If you are nerd who craves accuracy, you can still make orbital speed of planets proportionally realistic. Set Earth's year to whatever time you want and then work out how long other planets' years are using [planets' year length table](https://spaceplace.nasa.gov/years-on-other-planets/en). This is **completely optional** and you can just use common sense. It's still recommend to take a look at [planets' year length table](https://spaceplace.nasa.gov/years-on-other-planets/en) though. +
+ +### Assignment + +
+ +#### Animated model + +1. Start by creating a list with its items representing sun and orbits of the 8 planets. You will put planet on its orbits in the next step. Reset `
    `'s default styles, then center the sun and planets' orbits. You may want to use combination of `position` and `transform` properties to do this. + + ```html +
      +
    1. +
    2. + +
    + ``` + +1. Add planets to their respectful orbits. As [discussed earlier](#solar-system-projection), their projection doesn't have to be 100% accurate, but it must make sense. Using [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascading_variables/Using_custom_properties) might help you optimize setting planets' properties. + +1. Make planets rotate around the sun using `@keyframe` animation. + +#### Control panel + +1. Create a panel of 8 buttons, each for one planet. This panel must enable user to select one planet at the time and deselect it by clicking on those buttons. Both the selected planet and its button must be highlighted. You are free to come up with your own highlight effects. + +1. Make transition between highlighted and non-highlighted state of both planets and buttons using `transition` property. + +
From fe7685324cc79fd4c553209ccad029050d870a14 Mon Sep 17 00:00:00 2001 From: BUTURUM Date: Fri, 28 Nov 2025 18:32:10 +0000 Subject: [PATCH 2/2] fix: markdown linting issues --- advanced_html_css/animation/project_solar_system.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/advanced_html_css/animation/project_solar_system.md b/advanced_html_css/animation/project_solar_system.md index da5917d15e6..7c2cc0859cf 100644 --- a/advanced_html_css/animation/project_solar_system.md +++ b/advanced_html_css/animation/project_solar_system.md @@ -7,7 +7,11 @@ In this project-lesson we will use CSS animation and transition to build animate Our [solar system](https://en.wikipedia.org/wiki/Solar_System) consist of the sun and 8 planets. All those cosmic bodies have unique properties (e.g. size, orbit radius, orbital speed, etc). There is little to no value in projecting those properties with 100% accuracy. In fact it can make model unusable in some cases. Thus go with whatever is beautiful as long as it makes sense: Saturn still should be bigger than mercury and mars shouldn't be blue, also don't add Pluto.
+ +#### Orbital speeds + If you are nerd who craves accuracy, you can still make orbital speed of planets proportionally realistic. Set Earth's year to whatever time you want and then work out how long other planets' years are using [planets' year length table](https://spaceplace.nasa.gov/years-on-other-planets/en). This is **completely optional** and you can just use common sense. It's still recommend to take a look at [planets' year length table](https://spaceplace.nasa.gov/years-on-other-planets/en) though. +
### Assignment