Skip to content

My project is a model Solar System animated with CSS. #72

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
adam-weiler wants to merge 1 commit into
base: main
Choose a base branch
from
Open

My project is a model Solar System animated with CSS. #72

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions CSS-Solar-System/Readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
# CSS Solar System

An animated model of the Solar System. The animations themselves use only CSS, and the year counter uses JS.

## To run the code

Navigate to the CSS-Solar-System folder in command line and open index.html.

## Some Random Facts

- The Planets and the Sun are not to scale. (The sun would take up most of the screen, and you wouldn't see Pluto at all.)
- But I tried to make the rotation speed accurate.
- Mercury rotates around the Sun every 87.97 Earth days.
- Venus rotates around the Sun every 224.7 Earth days.
- Earth rotates around the Sun every 365.26 Earth days, or 1 Earth year. This is 3.65 seconds in the simulation.
- Mars rotates around the Sun every 687 Earth days, or 1.881 Earth years.
- Jupiter rotates around the Sun every 4,332.59 Earth days, or 11.86 Earth years.
- Saturn rotates around the Sun every 10,759 Earth days, or 29.46 Earth years.
- Uranus rotates around the Sun every 30,688.5 Earth days, or 84.01 Earth years.
- Neptune rotates around the Sun every 60,182 Earth days, or 164.8 Earth years.
- Pluto rotates around the Sun every 90,560 Earth days, or 248.1 Earth years.
90 changes: 90 additions & 0 deletions CSS-Solar-System/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>CSS Solar System</title>
<link rel="stylesheet" href="style.css" /> <!-- Contains most of the CSS. -->
<link rel="stylesheet" href="spin.css" /> <!-- Contains the spin animation. -->
<script src="script.js"></script> <!-- Counts how many years have passed. -->
</head>
<body onload="startCounter()">
<div id="wrapper">

<div id="sun">
<span class="tooltiptext">The Sun</span>
</div>

<div class="circle-container1">
<div id="mercury" class="circle">
<span class="tooltiptext">Mercury</span>
</div>
</div>

<div class="circle-container2">
<div id="venus" class="circle">
<span class="tooltiptext">Venus</span>
</div>
</div>

<div class="circle-container3">
<div id="earth" class="circle">
<span class="tooltiptext">Earth</span>
</div>
</div>

<div class="circle-container4">
<div id="mars" class="circle">
<span class="tooltiptext">Mars</span>
</div>
</div>

<div class="circle-container5">
<div id="jupiter" class="circle">
<span class="tooltiptext">Jupiter</span>
</div>
</div>

<div class="circle-container6">
<div id="saturn" class="circle">
<span class="tooltiptext">Saturn</span>
</div>
<div id="rings" class="circle"></div>
</div>

<div class="circle-container7">
<div id="uranus" class="circle">
<span class="tooltiptext">Uranus</span>
</div>
</div>

<div class="circle-container8">
<div id="neptune" class="circle">
<span class="tooltiptext">Neptune</span>
</div>
</div>

<div class="circle-container9">
<div id="pluto" class="circle">
<span class="tooltiptext">Pluto</span>
</div>
</div>
<div id="counter"></div>

<!-- <div id="info">
<ul>
<li>Planets and Sun are not to scale.</li>
<li>But I tried to make the rotation speed accurate.</li>
<li>Mercury rotates around the Sun every 87.97 Earth days.</li>
<li>Venus rotates around the Sun every 224.7 Earth days.</li>
<li>Earth rotates around the Sun every 365.26 Earth days. This is 3.65 seconds in the simulation.</li>
<li>Mars rotates around the Sun every 687 Earth days.</li>
<li>Jupiter rotates around the Sun every 4,332.59 Earth days.</li>
<li>Saturn rotates around the Sun every 10,759 Earth days.</li>
<li>Uranus rotates around the Sun every 30,688.5 Earth days.</li>
<li>Neptune rotates around the Sun every 60,182 Earth days.</li>
<li>Pluto rotates around the Sun every 90,560 Earth days.</li>
</ul>
</div> -->
</div>
</body>
</html>
8 changes: 8 additions & 0 deletions CSS-Solar-System/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
var yearsPassed = 0;

function startCounter() {
document.getElementById('counter').innerHTML = yearsPassed + " Earth years have passed.";

yearsPassed++;
setTimeout(startCounter, 3650); //Restarts the function every 3.65 seconds.
}
46 changes: 46 additions & 0 deletions CSS-Solar-System/spin.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
/* Animations */
/*************************************************/
@-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(-360deg);
}
}

@-moz-keyframes rotation {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(-360deg);
}
}

@-ms-keyframes rotation {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(-360deg);
}
}

@-o-keyframes rotation {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(-360deg);
}
}

@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
Loading