fireworks.css

@@ -4,8 +4,8 @@
     position: fixed;
     top: 0;
     left: 0;
-    width: 100%;
-    height: 100%;
+    width: 100vw;
+    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 */
-    animation: explode 2.5s ease-out forwards, colorShift 2.5s linear infinite;
-    /*animation: explode 1s ease-out forwards;*/
+    background: var(--color);
+    animation: move 2.5s ease-out, fadeOut 2.5s ease-out, shrink 2.5s ease-out;
+    /*animation: explode 2.5s ease-out forwards, colorShift 2.5s linear infinite;*/
     transform-origin: center;
   }
 
-  /* animation for the explosion */
-  @keyframes explode {
-    0% {
-      transform: scale(0.5);
-      opacity: 1;
-    }
-    100% {
-      transform: translate(var(--x), var(--y)) scale(0.4);
-      opacity: 0;
-    }
+  /* every rocket */
+  .rocket {
+    position: absolute;
+    width: 4px;
+    height: 20px;
+    background: var(--color);
+    border-radius: 2px;
+    animation: rise 1s ease-out;
   }
   
-/* colors for the fireworks */
-@keyframes colorShift {
-  0% {
-    background: rgba(255, 0, 0, 1); /* Kräftiges Rot */
+/* movement of particles */
+@keyframes move {
+  from {
+    transform: translate(0, 0);
   }
-  20% {
-    background: rgba(0, 255, 0, 1); /* Kräftiges Grün */
-  }
-  40% {
-    background: rgba(0, 0, 255, 1); /* Kräftiges Blau */
-  }
-  60% {
-    background: rgba(255, 255, 0, 1); /* Gelb */
-  }
-  80% {
-    background: rgba(255, 0, 255, 1); /* Magenta */
-  }
-  100% {
-    background: rgba(0, 255, 255, 1); /* Türkis */
+  to {
+    transform: translate(var(--x), var(--y));
+  }
+}
+
+/* fadeout of particles */
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+/* 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,12 +50,24 @@ 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 y = Math.random() * window.innerHeight * 0.7 + window.innerHeight * 0.15;
-  //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
+  const x = Math.random() * window.innerWidth * 0.7 + window.innerWidth * 0.15;
+  const y = Math.random() * window.innerHeight * 0.5 + window.innerHeight * 0.25;
 
+  // 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
+
+  fireworkContainer.appendChild(rocket);
+
+  setTimeout(() => {
+    rocket.remove();
 
     // create particles for the firework
     for (let i = 0; i < particlesPerFirework; i++) {
@@ -68,19 +80,12 @@ function launchFirework() {
       const xOffset = Math.cos(angle) * distance;
       const yOffset = Math.sin(angle) * distance;
 
-    // get random color
-    const color = colors[Math.floor(Math.random() * colors.length)];
-
-    const colorDelay = Math.random() * 2; // Zufällige Verzögerung bis 2 Sekunden
-
       // set particle properties
       particle.style.left = `${x}px`;
       particle.style.top = `${y}px`;
       particle.style.setProperty('--x', `${xOffset}px`);
       particle.style.setProperty('--y', `${yOffset}px`);
-    particle.style.background = color;
-
-    particle.style.animationDelay = `${colorDelay}s`;
+      particle.style.setProperty('--color', fireworkColor);
 
       // add particle to the container
       fireworkContainer.appendChild(particle);
@@ -90,6 +95,7 @@ function launchFirework() {
         particle.remove();
       }, 3000); // Animationduration about 2.5 seconds
     }
+  }, 1500); // delay for the rocket to reach the top of the screen
 }
 
 // automaticly start fireworks