working

fireworks.js

@@ -1,6 +1,17 @@
 const fireworks = true; // enable/disable fireworks
+const scrollFireworks = true; // enable fireworks to scroll with page content
 const particlesPerFirework = 50; // count of particles per firework
 
+// array of color palettes for the fireworks
+const colorPalettes = [
+  ['#ff0000', '#ff7300', '#ff4500'], // red's
+  ['#0040ff', '#5a9bff', '#b0d9ff'], // blue's
+  ['#47ff00', '#8eff47', '#00ff7f'], // green's
+  ['#ffd700', '#c0c0c0', '#ff6347'], // gold, silver, red
+  ['#ff00ff', '#ff99ff', '#800080'], // magenta's
+  ['#ffef00', '#ffff99', '#ffd700'], // yellow's
+];
+
 let msgPrinted = false; // flag to prevent multiple console messages
 
 // function to check and control fireworks
@@ -41,73 +52,97 @@ observer.observe(document.body, {
   attributes: true    // observe changes to attributes (e.g. class changes)
 });
 
-// function to add random fireworks
+
+
+// Funktion, um einen Schweif zu erzeugen
+function createRocketTrail(x, startY, endY) {
+  const fireworkContainer = document.querySelector('.fireworks');
+  const rocketTrail = document.createElement('div');
+  rocketTrail.classList.add('rocket-trail');
+  fireworkContainer.appendChild(rocketTrail);
+
+  // Setze Position und Animation
+  rocketTrail.style.setProperty('--trailX', `${x}px`);
+  rocketTrail.style.setProperty('--trailStartY', `${startY}px`);
+  rocketTrail.style.setProperty('--trailEndY', `${endY}px`);
+
+  // Entferne das Element nach der Animation
+  setTimeout(() => {
+    fireworkContainer.removeChild(rocketTrail);
+  }, 2000); // Dauer der Animation
+}
+
+
+// Funktion für die Partikel-Explosion
+function createExplosion(x, y) {
+  const fireworkContainer = document.querySelector('.fireworks');
+
+  // Wähle eine zufällige Farbkombination
+  const chosenPalette = colorPalettes[Math.floor(Math.random() * colorPalettes.length)];
+
+  for (let i = 0; i < particlesPerFirework; i++) {
+    const particle = document.createElement('div');
+    particle.classList.add('firework');
+
+    const angle = Math.random() * 2 * Math.PI; // Zufällige Richtung
+    const distance = Math.random() * 180 + 100; // Zufällige Distanz
+    const xOffset = Math.cos(angle) * distance;
+    const yOffset = Math.sin(angle) * distance;
+
+    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 = chosenPalette[Math.floor(Math.random() * chosenPalette.length)];
+
+    fireworkContainer.appendChild(particle);
+
+    // Entferne Partikel nach der Animation
+    setTimeout(() => particle.remove(), 3000);
+  }
+}
+
+// Funktion für das Feuerwerk mit Schweif
 function launchFirework() {
   const fireworkContainer = document.querySelector('.fireworks');
   if (!fireworkContainer) return;
 
-  // some colors for the fireworks
-  const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff', '#ffffff'];
+  // Zufällige horizontale Position
+  //const x = Math.random() * window.innerWidth * 0.7 + window.innerWidth * 0.15;
+  const x = Math.random() * window.innerWidth; // Beliebiger Wert auf der gesamten Breite
 
-  // random position on the screen
-  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);
+  // Schweif startet unten und endet auf einer zufälligen Höhe um die Mitte
+  let startY, endY;
+  if (scrollFireworks) {
+    // Y-Position berücksichtigt das Scrollen
+    startY = window.scrollY + window.innerHeight; // Unterkante des Fensters plus der Scroll-Offset
+    endY = Math.random() * window.innerHeight * 0.5 + window.innerHeight * 0.2 + window.scrollY; // Bereich um die Mitte, aber auch mit Scrollen
+  } else {
+    startY = window.innerHeight; // Unterkante des Fensters
+    endY = Math.random() * window.innerHeight * 0.5 + window.innerHeight * 0.2; // Bereich um die Mitte
+  }
+  //console.log(startY, endY);
+  
+  // Schweif erzeugen
+  createRocketTrail(x, startY, endY);
 
+  // Explosion erzeugen
   setTimeout(() => {
-    rocket.remove();
-
-    // create particles for the firework
-    for (let i = 0; i < particlesPerFirework; i++) {
-      const particle = document.createElement('div');
-      particle.classList.add('firework');
-
-      // 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
-      particle.style.left = `${x}px`;
-      particle.style.top = `${y}px`;
-      particle.style.setProperty('--x', `${xOffset}px`);
-      particle.style.setProperty('--y', `${yOffset}px`);
-      particle.style.setProperty('--color', fireworkColor);
-
-      // add particle to the container
-      fireworkContainer.appendChild(particle);
-
-      // remove particle after animation ends so the DOM doesn't get filled with particles after 3 seconds
-      setTimeout(() => {
-        particle.remove();
-      }, 3000); // Animationduration about 2.5 seconds
-    }
-  }, 1500); // delay for the rocket to reach the top of the screen
+    createExplosion(x, endY); // Explosion an der Endhöhe
+  }, 1000); // or 1200
 }
 
-// automaticly start fireworks
+// Startet die Feuerwerksroutine
 function startFireworks() {
   fireworksInterval = setInterval(() => {
-    const randomCount = Math.random() * 3 + 2; // 2 to 5 fireworks simultaneously
+    const randomCount = Math.floor(Math.random() * 4) + 4;
     for (let i = 0; i < randomCount; i++) {
       launchFirework();
     }
-  }, 1800) // firework every 600 mil second
+  }, 1800);
 }
 
+
 // initialize snowflakes and add random snowflakes after the DOM is loaded
 document.addEventListener('DOMContentLoaded', () => {
   if (!fireworks) return; // exit if fireworks are disabled