working

fireworks.css

@@ -17,7 +17,8 @@
     height: 6px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.9); /* standard colors */
-    animation: explode 1s ease-out forwards;
+    animation: explode 2.5s ease-out forwards, colorShift 2.5s linear infinite;
+    /*animation: explode 1s ease-out forwards;*/
     transform-origin: center;
   }
   
@@ -28,17 +29,29 @@
       opacity: 1;
     }
     100% {
-      transform: translate(var(--x), var(--y)) scale(0.3);
+      transform: translate(var(--x), var(--y)) scale(0.4);
       opacity: 0;
     }
   }
   
-  /* optional: different colors for odd and even fireworks */
+/* colors for the fireworks */
-  .firework:nth-child(odd) {
+@keyframes colorShift {
-    background: rgba(255, 100, 100, 0.9); /* red */
+  0% {
+    background: rgba(255, 0, 0, 1); /* Kräftiges Rot */
+  }
+  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 */
   }
-  
-  .firework:nth-child(even) {
-    background: rgba(100, 100, 255, 0.9); /* blue */
 }
-  

fireworks.js

@@ -18,12 +18,14 @@ function toggleFirework() {
     fireworksContainer.style.display = 'none'; // hide fireworks
     if (!msgPrinted) {
       console.log('Fireworks hidden');
+      clearInterval(fireworksInterval);
       msgPrinted = true;
     }
   } else {
     fireworksContainer.style.display = 'block'; // show fireworks
     if (msgPrinted) {
       console.log('Fireworks visible');
+      startFireworks();
       msgPrinted = false;
     }
   }
@@ -44,9 +46,15 @@ function launchFirework() {
   const fireworkContainer = document.querySelector('.fireworks');
   if (!fireworkContainer) return;
 
+  // some colors for the fireworks
+  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
+
 
 
   // create particles for the firework
@@ -60,30 +68,38 @@ 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`;
 
     // add particle to the container
     fireworkContainer.appendChild(particle);
 
-    // remove particle after animation ends
+    // remove particle after animation ends so the DOM doesn't get filled with particles after 3 seconds
-    particle.addEventListener('animationend', () => {
+    setTimeout(() => {
       particle.remove();
-    });
+    }, 3000); // Animationduration about 2.5 seconds
   }
 }
 
 // automaticly start fireworks
 function startFireworks() {
-  setInterval(() => {
+  fireworksInterval = setInterval(() => {
     const randomCount = Math.random() * 3 + 2; // 2 to 5 fireworks simultaneously
     for (let i = 0; i < randomCount; i++) {
       launchFirework();
     }
-  }, 600); // firework every 600 mil second
+  }, 1800) // firework every 600 mil second
 }
 
 // initialize snowflakes and add random snowflakes after the DOM is loaded