try to set schweif

fireworks.css

@@ -4,8 +4,8 @@
     position: fixed;
     top: 0;
     left: 0;
-    width: 100%;
+    width: 100vw;
-    height: 100%;
+    height: 100vh;
     overflow: hidden;
     z-index: 10; /* put it on top */
   }
@@ -16,42 +16,58 @@
     width: 6px;
     height: 6px;
     border-radius: 50%;
-    background: rgba(255, 255, 255, 0.9); /* standard colors */
+    background: var(--color);
-    animation: explode 2.5s ease-out forwards, colorShift 2.5s linear infinite;
+    animation: move 2.5s ease-out, fadeOut 2.5s ease-out, shrink 2.5s ease-out;
-    /*animation: explode 1s ease-out forwards;*/
+    /*animation: explode 2.5s ease-out forwards, colorShift 2.5s linear infinite;*/
     transform-origin: center;
   }
 
-  /* animation for the explosion */
+  /* every rocket */
-  @keyframes explode {
+  .rocket {
-    0% {
+    position: absolute;
-      transform: scale(0.5);
+    width: 4px;
-      opacity: 1;
+    height: 20px;
-    }
+    background: var(--color);
-    100% {
+    border-radius: 2px;
-      transform: translate(var(--x), var(--y)) scale(0.4);
+    animation: rise 1s ease-out;
-      opacity: 0;
-    }
   }
   
-/* colors for the fireworks */
+/* movement of particles */
-@keyframes colorShift {
+@keyframes move {
-  0% {
+  from {
-    background: rgba(255, 0, 0, 1); /* Kräftiges Rot */
+    transform: translate(0, 0);
   }
-  20% {
+  to {
-    background: rgba(0, 255, 0, 1); /* Kräftiges Grün */
+    transform: translate(var(--x), var(--y));
-  }
+  }
-  40% {
+}
-    background: rgba(0, 0, 255, 1); /* Kräftiges Blau */
+
-  }
+/* fadeout of particles */
-  60% {
+@keyframes fadeOut {
-    background: rgba(255, 255, 0, 1); /* Gelb */
+  from {
-  }
+    opacity: 1;
-  80% {
+  }
-    background: rgba(255, 0, 255, 1); /* Magenta */
+  to {
-  }
+    opacity: 0;
-  100% {
+  }
-    background: rgba(0, 255, 255, 1); /* Türkis */
+}
+
+/* shrinking of particles */
+@keyframes shrink {
+  from {
+    transform: scale(1);
+  }
+  to {
+    transform: scale(0.5);
+  }
+}
+
+/* movement of rockets */
+@keyframes rise {
+  from {
+    transform: translate(0, 100vh);
+  }
+  to {
+    transform: translate(0, var(--y));
   }
 }

fireworks.js

@@ -50,46 +50,52 @@ function launchFirework() {
   const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff', '#ffffff'];
 
   // random position on the screen
-  const x = Math.random() * window.innerWidth * 0.8 + window.innerWidth * 0.1; 
+  const x = Math.random() * window.innerWidth * 0.7 + window.innerWidth * 0.15;
-  const y = Math.random() * window.innerHeight * 0.7 + window.innerHeight * 0.15;
+  const y = Math.random() * window.innerHeight * 0.5 + window.innerHeight * 0.25;
-  //const x = Math.random() * window.innerWidth * 0.7 + window.innerWidth * 0.15; // Mittiger
-  //const y = Math.random() * window.innerHeight * 0.5 + window.innerHeight * 0.25; // Mittiger
 
+  // get random color for the whole firework
+  const fireworkColor = colors[Math.floor(Math.random() * colors.length)];
 
+  // create rocket element
+  const rocket = document.createElement('div');
+  rocket.classList.add('rocket');
+  rocket.style.left = `${x}px`;
+  rocket.style.bottom = `0px`;
+  rocket.style.setProperty('--color', fireworkColor);
+  rocket.style.setProperty('--y', `-${window.innerHeight - y}px`); // rocket animation from bottom to explosion position
 
-  // create particles for the firework
+  fireworkContainer.appendChild(rocket);
-  for (let i = 0; i < particlesPerFirework; i++) {
-    const particle = document.createElement('div');
-    particle.classList.add('firework');
 
-    // random angle and distance
+  setTimeout(() => {
-    const angle = Math.random() * 2 * Math.PI; // 0 to 360 degrees
+    rocket.remove();
-    const distance = Math.random() * 150 + 100; // 50 to 150 pixels
-    const xOffset = Math.cos(angle) * distance;
-    const yOffset = Math.sin(angle) * distance;
 
-    // get random color
+    // create particles for the firework
-    const color = colors[Math.floor(Math.random() * colors.length)];
+    for (let i = 0; i < particlesPerFirework; i++) {
+      const particle = document.createElement('div');
+      particle.classList.add('firework');
 
-    const colorDelay = Math.random() * 2; // Zufällige Verzögerung bis 2 Sekunden
+      // random angle and distance
+      const angle = Math.random() * 2 * Math.PI; // 0 to 360 degrees
+      const distance = Math.random() * 150 + 100; // 50 to 150 pixels
+      const xOffset = Math.cos(angle) * distance;
+      const yOffset = Math.sin(angle) * distance;
 
-    // set particle properties
+      // set particle properties
-    particle.style.left = `${x}px`;
+      particle.style.left = `${x}px`;
-    particle.style.top = `${y}px`;
+      particle.style.top = `${y}px`;
-    particle.style.setProperty('--x', `${xOffset}px`);
+      particle.style.setProperty('--x', `${xOffset}px`);
-    particle.style.setProperty('--y', `${yOffset}px`);
+      particle.style.setProperty('--y', `${yOffset}px`);
-    particle.style.background = color;
+      particle.style.setProperty('--color', fireworkColor);
 
-    particle.style.animationDelay = `${colorDelay}s`;
+      // add particle to the container
+      fireworkContainer.appendChild(particle);
 
-    // add particle to the container
+      // remove particle after animation ends so the DOM doesn't get filled with particles after 3 seconds
-    fireworkContainer.appendChild(particle);
+      setTimeout(() => {
-
+        particle.remove();
-    // remove particle after animation ends so the DOM doesn't get filled with particles after 3 seconds
+      }, 3000); // Animationduration about 2.5 seconds
-    setTimeout(() => {
+    }
-      particle.remove();
+  }, 1500); // delay for the rocket to reach the top of the screen
-    }, 3000); // Animationduration about 2.5 seconds
-  }
 }
 
 // automaticly start fireworks