Merge pull request 'advanced' (#1) from advanced into main

Reviewed-on: #1

fireworks.css

@@ -1,57 +1,66 @@
-/* container for fireworks */
 .fireworks {
-    pointer-events: none;
+  position: absolute;
-    position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-    overflow: hidden;
+  pointer-events: none;
-    z-index: 10; /* put it on top */
+  z-index: 10;
+
+  /* activate the following for fixed positioning */
+  /*position: fixed;*/
+  /*overflow: hidden;*/
 }
 
-  /* every firework particle */
+.rocket-trail {
-  .firework {
   position: absolute;
-    width: 6px;
+  left: var(--trailX);
-    height: 6px;
+  top: var(--trailStartY);
-    border-radius: 50%;
+  width: 4px;
-    background: rgba(255, 255, 255, 0.9); /* standard colors */
+
-    animation: explode 2.5s ease-out forwards, colorShift 2.5s linear infinite;
+  /* activate the following for rocket trail */
-    /*animation: explode 1s ease-out forwards;*/
+  height: 60px;
-    transform-origin: center;
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
+  filter: blur(2px);
+
+  /* activate the following for rocket trail as a point */
+  /*height: 4px;*/
+  /*background: white;*/
+  /*border-radius: 50%;
+  box-shadow: 0 0 8px 2px white;*/
+
+  animation: rocket-trail-animation 1s linear forwards;
 }
 
-  /* animation for the explosion */
+@keyframes rocket-trail-animation {
-  @keyframes explode {
   0% {
-      transform: scale(0.5);
+    transform: translateY(0);
     opacity: 1;
   }
   100% {
-      transform: translate(var(--x), var(--y)) scale(0.4);
+    transform: translateY(calc(var(--trailEndY) - var(--trailStartY)));
     opacity: 0;
   }
 }
 
-/* colors for the fireworks */
+/* Animation for the particles */
-@keyframes colorShift {
+@keyframes fireworkParticle {
   0% {
-    background: rgba(255, 0, 0, 1); /* Kräftiges Rot */
+    opacity: 1;
-  }
+    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 */
+    opacity: 0;
+    transform: translate(var(--x), var(--y));
   }
 }
+
+.firework {
+  position: absolute;
+  width: 5px;
+  height: 5px;
+  background: white;
+  border-radius: 50%;
+  animation: fireworkParticle 1.5s ease-out forwards;
+  filter: blur(1px);
+}

fireworks.js

@@ -1,7 +1,24 @@
 const fireworks = true; // enable/disable fireworks
+const scrollFireworks = true; // enable fireworks to scroll with page content
 const particlesPerFirework = 50; // count of particles per firework
+const minFireworks = 3; // minimum number of simultaneous fireworks
+const maxFireworks = 6; // maximum number of simultaneous fireworks
+const intervalOfFireworks = 3200; // interval for the fireworks in milliseconds
+
+// 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
+  ['#ff4500', '#ff6347', '#ff7f50'], // orange's
+  ['#e3e3e3', '#c0c0c0', '#7d7c7c'], // silver's
+];
 
 let msgPrinted = false; // flag to prevent multiple console messages
+let spacing = 0; // spacing between fireworks
 
 // function to check and control fireworks
 function toggleFirework() {
@@ -41,69 +58,97 @@ observer.observe(document.body, {
   attributes: true    // observe changes to attributes (e.g. class changes)
 });
 
-// function to add random fireworks
+
-function launchFirework() {
+// Function to create a rocket trail
+function createRocketTrail(x, startY, endY) {
   const fireworkContainer = document.querySelector('.fireworks');
-  if (!fireworkContainer) return;
+  const rocketTrail = document.createElement('div');
+  rocketTrail.classList.add('rocket-trail');
+  fireworkContainer.appendChild(rocketTrail);
 
-  // some colors for the fireworks
+  // Set position and animation
-  const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff', '#ffffff'];
+  rocketTrail.style.setProperty('--trailX', `${x}px`);
+  rocketTrail.style.setProperty('--trailStartY', `${startY}px`);
+  rocketTrail.style.setProperty('--trailEndY', `${endY}px`);
 
-  // random position on the screen
+  // Remove the element after the animation
-  const x = Math.random() * window.innerWidth * 0.8 + window.innerWidth * 0.1; 
+  setTimeout(() => {
-  const y = Math.random() * window.innerHeight * 0.7 + window.innerHeight * 0.15;
+    fireworkContainer.removeChild(rocketTrail);
-  //const x = Math.random() * window.innerWidth * 0.7 + window.innerWidth * 0.15; // Mittiger
+  }, 2000); // Duration of the animation
-  //const y = Math.random() * window.innerHeight * 0.5 + window.innerHeight * 0.25; // Mittiger
+}
 
+// Function for particle explosion
+function createExplosion(x, y) {
+  const fireworkContainer = document.querySelector('.fireworks');
 
+  // Choose a random color palette
+  const chosenPalette = colorPalettes[Math.floor(Math.random() * colorPalettes.length)];
 
-  // 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; // Random direction
-    const angle = Math.random() * 2 * Math.PI; // 0 to 360 degrees
+    const distance = Math.random() * 180 + 100; // Random distance
-    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
-    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.background = chosenPalette[Math.floor(Math.random() * chosenPalette.length)];
 
-    particle.style.animationDelay = `${colorDelay}s`;
-
-    // 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
+    // Remove particle after the animation
-    setTimeout(() => {
+    setTimeout(() => particle.remove(), 3000);
-      particle.remove();
-    }, 3000); // Animationduration about 2.5 seconds
   }
 }
 
-// automaticly start fireworks
+// Function for the firework with trail
+function launchFirework() {
+  const fireworkContainer = document.querySelector('.fireworks');
+  if (!fireworkContainer) return;
+
+  // Random horizontal position
+  const x = Math.random() * window.innerWidth; // Any value across the entire width
+
+  // Trail starts at the bottom and ends at a random height around the middle
+  let startY, endY;
+  if (scrollFireworks) {
+    // Y-position considers scrolling
+    startY = window.scrollY + window.innerHeight; // Bottom edge of the window plus the scroll offset
+    endY = Math.random() * window.innerHeight * 0.5 + window.innerHeight * 0.2 + window.scrollY; // Area around the middle, but also with scrolling
+  } else {
+    startY = window.innerHeight; // Bottom edge of the window
+    endY = Math.random() * window.innerHeight * 0.5 + window.innerHeight * 0.2; // Area around the middle
+  }
+
+  // Create trail
+  createRocketTrail(x, startY, endY);
+
+  // Create explosion
+  setTimeout(() => {
+    createExplosion(x, endY); // Explosion at the end height
+  }, 1000); // or 1200
+}
+
+// Start the firework routine
 function startFireworks() {
   fireworksInterval = setInterval(() => {
-    const randomCount = Math.random() * 3 + 2; // 2 to 5 fireworks simultaneously
+    const randomCount = Math.floor(Math.random() * maxFireworks) + minFireworks;
     for (let i = 0; i < randomCount; i++) {
+      setTimeout(() => {
         launchFirework();
+      }, i * 200); // 200ms delay between fireworks
     }
-  }, 1800) // firework every 600 mil second
+  }, intervalOfFireworks); // Interval between fireworks
 }
 
-// initialize snowflakes and add random snowflakes after the DOM is loaded
+// Initialize fireworks and add random fireworks after the DOM is loaded
 document.addEventListener('DOMContentLoaded', () => {
   if (!fireworks) return; // exit if fireworks are disabled
   startFireworks();
+  toggleFirework();
 });

test-site.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Fireworks Display</title>
+    <link rel="stylesheet" href="fireworks.css">
+    
+    <style>
+        body {
+            background-color: black;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="fireworks" aria-hidden="true"></div>
+    <script src="fireworks.js"></script>
+</body>
+
+</html>