Added animation solar system (#2305)

* Create solar.html * Add files via upload * Add files via upload * Update include.js
zero-to-mastery · Oct 22, 2023 · c06364f · c06364f
1 parent c143df5
commit c06364f
Show file tree

Hide file tree

Showing 5 changed files with 201 additions and 0 deletions.
diff --git a/Art/Shubhamkashyap1601/solar.gif b/Art/Shubhamkashyap1601/solar.gif
diff --git a/Art/Shubhamkashyap1601/solar.html b/Art/Shubhamkashyap1601/solar.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="styles.css">
+  <title>Solar System</title>
+
+</head>
+<body>      
+  <div class="orbit orbit-mercury"></div>
+  <div class="orbit orbit-venus"></div>
+  <div class="orbit orbit-earth"></div>
+  <div class="orbit orbit-mars"></div>
+  <div class="orbit orbit-jupiter"></div>
+  <div class="orbit orbit-saturn"></div>
+  <div class="orbit orbit-uranus"></div>
+  <div class="orbit orbit-neptune"></div>
+
+  <div class="sun"></div>
+  <div class="planet mercury"></div>
+  <div class="planet venus"></div>
+  <div class="planet earth"></div>
+  <div class="planet mars"></div>
+  <div class="planet jupiter"></div>
+  <div class="planet saturn"></div>
+  <div class="planet uranus"></div>
+  <div class="planet neptune"></div>
+  <div class="stars"></div>
+
+
+  <div id="planet-info"></div>
+
+  <script>
+    const planets = document.querySelectorAll('.planet');
+    const planetNames = ['Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter', 'Saturn', 'Uranus', 'Neptune'];
+    const distances = [100, 160, 220, 280, 360, 460, 560, 640]; // Orbital distances from the sun
+    const speeds = [0.1, 0.07, 0.05, 0.03, 0.01, 0.008, 0.005, 0.003]; // Orbital speeds of the planets
+
+    const planetInfo = document.getElementById('planet-info');
+
+    function displayPlanetName(index) {
+      planetInfo.textContent = planetNames[index];
+    }
+
+    function hidePlanetName() {
+      planetInfo.textContent = '';
+    }
+
+    planets.forEach((planet, index) => {
+      planet.addEventListener('mouseover', () => {
+        displayPlanetName(index);
+      });
+
+      planet.addEventListener('mouseout', () => {
+        hidePlanetName();
+      });
+    });
+
+    function orbitPlanets() {
+      let time = performance.now();
+
+      planets.forEach((planet, index) => {
+        const distanceX = distances[index];
+        const distanceY = distances[index] * 0.6; // Adjust the Y-axis distance for elliptical orbit
+        const speed = speeds[index];
+        const angle = (time * speed) / 20; // Convert time to seconds and adjust speed
+        const x = distanceX * Math.cos(angle);
+        const y = distanceY * Math.sin(angle);
+        planet.style.transform = `translate(${x}px, ${y}px)`;
+      });
+
+      requestAnimationFrame(orbitPlanets);
+    }
+
+    orbitPlanets();
+
+    function createRandomStars() {
+      const numberOfStars = 100; // Adjust the number of stars as desired
+      const starsContainer = document.querySelector('.stars');
+
+      for (let i = 0; i < numberOfStars; i++) {
+        const star = document.createElement('div');
+        star.className = 'star';
+        star.style.left = `${Math.random() * 100}vw`;
+        star.style.top = `${Math.random() * 100}vh`;
+        star.style.width = `${Math.random() * 80}px`;
+        star.style.height = star.style.width;
+        // Generate a random twinkling time between 0.5s and 2s
+        const twinklingTime = Math.random() * 5 + 0.5;
+        star.style.animation = `twinkle ${twinklingTime}s infinite`;
+
+        starsContainer.appendChild(star);
+      }
+    }
+
+    createRandomStars();
+  </script>
+</body>
+</html>
diff --git a/Art/Shubhamkashyap1601/star.png b/Art/Shubhamkashyap1601/star.png
diff --git a/Art/Shubhamkashyap1601/styles.css b/Art/Shubhamkashyap1601/styles.css
@@ -0,0 +1,94 @@
+body {
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background-color: #000;
+  overflow: hidden;
+}
+
+.stars {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+}
+
+.star {
+  position: absolute;
+  width: 2px;
+  height: 2px;
+  background-color: white;
+  opacity: 0.5;
+  animation: twinkle 1s infinite;
+  background: url('star.png') no-repeat center center/contain;
+
+}
+
+@keyframes twinkle {
+  0% { opacity: 1; }
+  50% { opacity: 0; }
+  100% { opacity: 1; }
+}
+.sun {
+  width: 80px;
+  height: 80px;
+  background-color: yellow;
+  border-radius: 50%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.orbit {
+  width: 200px;
+  height: 200px;
+  border: 2px dashed rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  box-sizing: border-box;
+  pointer-events: none;
+}
+
+.orbit-mercury { width: 210px; height: 126px; }
+.orbit-venus { width: 330px; height: 198px; }
+.orbit-earth { width: 450px; height: 270px; }
+.orbit-mars { width: 570px; height: 342px; }
+.orbit-jupiter { width: 730px; height: 438px; }
+.orbit-saturn { width: 930px; height: 558px; }
+.orbit-uranus { width: 1130px; height: 678px; }
+.orbit-neptune { width: 1290px; height: 774px; }
+
+.planet {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  position: absolute;
+  top: 49%;
+  left: 49.5%;
+  transform: translate(-50%, -50%);
+}
+
+#planet-info {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 24px;
+  color: white; /* Set the text color to white */
+}
+.mercury { background-color: #D3D3D3; }
+.venus { background-color: #FFD700; }
+.earth { background-color: #6495ED; }
+.mars { background-color: #FF4500; }
+.jupiter {width:50px; height:50px ; background-color: #D2691E; }
+.saturn {width:40px; height:40px ; background-color: #FFA500; }
+.uranus { background-color: #00CED1; }
+.neptune { background-color: #000080; }
diff --git a/include.js b/include.js
@@ -2234,6 +2234,13 @@ let cards = [
     imageLink: './Art/PentesterPriyanshu/rotatingrectangle.gif',
     author: 'Priyanshu Prajapati',
     githubLink: 'https://github.com/PentesterPriyanshu'
+  },
+   {
+    artName: 'Solar System',
+    pageLink: './Art/Shubhamkashyap1601/solar.html',
+    imageLink: './Art/Shubhamkashyap1601/solar.gif',
+    author: 'Shubham Kashyap',
+    githubLink: 'https://github.com/Shubhamkashyap1601'
   }
 ];