From 3d77207101b2aa4e64b99466b2317814c409df76 Mon Sep 17 00:00:00 2001 From: CodeDevMLH Date: Fri, 29 Nov 2024 00:50:01 +0100 Subject: [PATCH 1/8] try to set schweif --- fireworks.css | 76 +++++++++++++++++++++++++++++++-------------------- fireworks.js | 68 ++++++++++++++++++++++++--------------------- 2 files changed, 83 insertions(+), 61 deletions(-) diff --git a/fireworks.css b/fireworks.css index b978c2e..0b22711 100644 --- a/fireworks.css +++ b/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 */ + to { + transform: translate(var(--x), var(--y)); } - 40% { - background: rgba(0, 0, 255, 1); /* Kräftiges Blau */ +} + +/* fadeout of particles */ +@keyframes fadeOut { + from { + opacity: 1; } - 60% { - background: rgba(255, 255, 0, 1); /* Gelb */ + to { + opacity: 0; } - 80% { - background: rgba(255, 0, 255, 1); /* Magenta */ +} + +/* shrinking of particles */ +@keyframes shrink { + from { + transform: scale(1); } - 100% { - background: rgba(0, 255, 255, 1); /* Türkis */ + to { + transform: scale(0.5); + } +} + +/* movement of rockets */ +@keyframes rise { + from { + transform: translate(0, 100vh); + } + to { + transform: translate(0, var(--y)); } } \ No newline at end of file diff --git a/fireworks.js b/fireworks.js index e712b37..6410b3a 100644 --- a/fireworks.js +++ b/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 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 - // create particles for the firework - for (let i = 0; i < particlesPerFirework; i++) { - const particle = document.createElement('div'); - particle.classList.add('firework'); + fireworkContainer.appendChild(rocket); - // 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; + setTimeout(() => { + rocket.remove(); - // get random color - const color = colors[Math.floor(Math.random() * colors.length)]; + // create particles for the firework + 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 - 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; + // 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); - particle.style.animationDelay = `${colorDelay}s`; + // add particle to the container + fireworkContainer.appendChild(particle); - // 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 - } + // 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 } // automaticly start fireworks From fa329c5e9ccd3c6a219fba8f8294bf76d1cc53b8 Mon Sep 17 00:00:00 2001 From: CodeDevMLH Date: Fri, 29 Nov 2024 22:24:00 +0100 Subject: [PATCH 2/8] working --- fireworks.css | 104 ++++++++++++++++--------------------- fireworks.js | 137 +++++++++++++++++++++++++++++++------------------ test-site.html | 18 +++++++ 3 files changed, 149 insertions(+), 110 deletions(-) create mode 100644 test-site.html diff --git a/fireworks.css b/fireworks.css index 0b22711..bb2bae8 100644 --- a/fireworks.css +++ b/fireworks.css @@ -1,73 +1,59 @@ -/* container for fireworks */ .fireworks { - pointer-events: none; - position: fixed; - top: 0; - left: 0; - width: 100vw; - height: 100vh; - overflow: hidden; - z-index: 10; /* put it on top */ - } - - /* every firework particle */ - .firework { - position: absolute; - width: 6px; - height: 6px; - border-radius: 50%; - 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; - } - - /* every rocket */ - .rocket { - position: absolute; - width: 4px; - height: 20px; - background: var(--color); - border-radius: 2px; - animation: rise 1s ease-out; - } - -/* movement of particles */ -@keyframes move { - from { - transform: translate(0, 0); - } - to { - transform: translate(var(--x), var(--y)); - } + /*position: fixed;*/ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + /*overflow: hidden;*/ + z-index: 10; } -/* fadeout of particles */ -@keyframes fadeOut { - from { +.rocket-trail { + position: absolute; + left: var(--trailX); + top: var(--trailStartY); + width: 4px; + /*height: 4px;*/ + height: 60px; + /*background: white;*/ + background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); + filter: blur(2px); + /*border-radius: 50%; + box-shadow: 0 0 8px 2px white;*/ + animation: rocket-trail-animation 1s linear forwards; +} + +@keyframes rocket-trail-animation { + 0% { + transform: translateY(0); opacity: 1; } - to { + 100% { + transform: translateY(calc(var(--trailEndY) - var(--trailStartY))); opacity: 0; } } -/* shrinking of particles */ -@keyframes shrink { - from { - transform: scale(1); +/* Animation für die Partikel */ +@keyframes fireworkParticle { + 0% { + opacity: 1; + transform: translate(0, 0); } - to { - transform: scale(0.5); + 100% { + opacity: 0; + transform: translate(var(--x), var(--y)); } } -/* movement of rockets */ -@keyframes rise { - from { - transform: translate(0, 100vh); - } - to { - transform: translate(0, var(--y)); - } +.firework { + position: absolute; + width: 5px; + height: 5px; + background: white; + border-radius: 50%; + animation: fireworkParticle 1.5s ease-out forwards; + filter: blur(1px); } \ No newline at end of file diff --git a/fireworks.js b/fireworks.js index 6410b3a..de0a3bb 100644 --- a/fireworks.js +++ b/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 diff --git a/test-site.html b/test-site.html new file mode 100644 index 0000000..ccf673d --- /dev/null +++ b/test-site.html @@ -0,0 +1,18 @@ + + + + + + Fireworks Display + + + + + + + + \ No newline at end of file From da5a51ca7cda512c0f72fa99955c1ef89ea989dc Mon Sep 17 00:00:00 2001 From: CodeDevMLH Date: Fri, 29 Nov 2024 22:49:00 +0100 Subject: [PATCH 3/8] small fixes, more colors, english comments --- fireworks.css | 17 ++++++++++---- fireworks.js | 64 +++++++++++++++++++++++++-------------------------- 2 files changed, 44 insertions(+), 37 deletions(-) diff --git a/fireworks.css b/fireworks.css index bb2bae8..5314a2b 100644 --- a/fireworks.css +++ b/fireworks.css @@ -1,13 +1,15 @@ .fireworks { - /*position: fixed;*/ position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; - /*overflow: hidden;*/ z-index: 10; + + /* activate the following for fixed positioning */ + /*position: fixed;*/ + /*overflow: hidden;*/ } .rocket-trail { @@ -15,13 +17,18 @@ left: var(--trailX); top: var(--trailStartY); width: 4px; - /*height: 4px;*/ + + /* activate the following for rocket trail */ height: 60px; - /*background: white;*/ 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; } @@ -36,7 +43,7 @@ } } -/* Animation für die Partikel */ +/* Animation for the particles */ @keyframes fireworkParticle { 0% { opacity: 1; diff --git a/fireworks.js b/fireworks.js index de0a3bb..cb454a4 100644 --- a/fireworks.js +++ b/fireworks.js @@ -1,6 +1,9 @@ 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 = 4; // minimum number of simultaneous fireworks +const maxFireworks = 6; // maximum number of simultaneous fireworks +const fireworksInterval = 3000; // interval for the fireworks // array of color palettes for the fireworks const colorPalettes = [ @@ -10,6 +13,8 @@ const colorPalettes = [ ['#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 @@ -53,39 +58,37 @@ observer.observe(document.body, { }); - -// Funktion, um einen Schweif zu erzeugen +// Function to create a rocket trail 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 + // Set position and 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 + // Remove the element after the animation setTimeout(() => { fireworkContainer.removeChild(rocketTrail); - }, 2000); // Dauer der Animation + }, 2000); // Duration of the animation } - -// Funktion für die Partikel-Explosion +// Function for particle explosion function createExplosion(x, y) { const fireworkContainer = document.querySelector('.fireworks'); - // Wähle eine zufällige Farbkombination + // Choose a random color palette 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 angle = Math.random() * 2 * Math.PI; // Random direction + const distance = Math.random() * 180 + 100; // Random distance const xOffset = Math.cos(angle) * distance; const yOffset = Math.sin(angle) * distance; @@ -97,54 +100,51 @@ function createExplosion(x, y) { fireworkContainer.appendChild(particle); - // Entferne Partikel nach der Animation + // Remove particle after the animation setTimeout(() => particle.remove(), 3000); } } -// Funktion für das Feuerwerk mit Schweif +// Function for the firework with trail function launchFirework() { const fireworkContainer = document.querySelector('.fireworks'); if (!fireworkContainer) return; - // 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 horizontal position + const x = Math.random() * window.innerWidth; // Any value across the entire width - // Schweif startet unten und endet auf einer zufälligen Höhe um die Mitte + // Trail starts at the bottom and ends at a random height around the middle 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 + // 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; // Unterkante des Fensters - endY = Math.random() * window.innerHeight * 0.5 + window.innerHeight * 0.2; // Bereich um die Mitte + startY = window.innerHeight; // Bottom edge of the window + endY = Math.random() * window.innerHeight * 0.5 + window.innerHeight * 0.2; // Area around the middle } - //console.log(startY, endY); - - // Schweif erzeugen + + // Create trail createRocketTrail(x, startY, endY); - // Explosion erzeugen + // Create explosion setTimeout(() => { - createExplosion(x, endY); // Explosion an der Endhöhe + createExplosion(x, endY); // Explosion at the end height }, 1000); // or 1200 } -// Startet die Feuerwerksroutine +// Start the firework routine function startFireworks() { fireworksInterval = setInterval(() => { - const randomCount = Math.floor(Math.random() * 4) + 4; + const randomCount = Math.floor(Math.random() * maxFireworks) + minFireworks; for (let i = 0; i < randomCount; i++) { launchFirework(); } - }, 1800); + }, fireworksInterval); // 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(); -}); \ No newline at end of file +}); From 8f61b05c6238e40cbe3ca2482871742fb336d74e Mon Sep 17 00:00:00 2001 From: CodeDevMLH Date: Fri, 29 Nov 2024 22:50:51 +0100 Subject: [PATCH 4/8] small changes --- fireworks.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/fireworks.js b/fireworks.js index cb454a4..557bc68 100644 --- a/fireworks.js +++ b/fireworks.js @@ -1,9 +1,9 @@ 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 = 4; // minimum number of simultaneous fireworks -const maxFireworks = 6; // maximum number of simultaneous fireworks -const fireworksInterval = 3000; // interval for the fireworks +const minFireworks = 5; // minimum number of simultaneous fireworks +const maxFireworks = 7; // maximum number of simultaneous fireworks +const fireworksInterval = 2800; // interval for the fireworks in milliseconds // array of color palettes for the fireworks const colorPalettes = [ From 36296698cb6c6325d45f95d3d79eeb5d697204f1 Mon Sep 17 00:00:00 2001 From: CodeDevMLH Date: Fri, 29 Nov 2024 23:31:13 +0100 Subject: [PATCH 5/8] some fixes --- fireworks.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/fireworks.js b/fireworks.js index 557bc68..a5bfa51 100644 --- a/fireworks.js +++ b/fireworks.js @@ -1,9 +1,9 @@ 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 = 5; // minimum number of simultaneous fireworks -const maxFireworks = 7; // maximum number of simultaneous fireworks -const fireworksInterval = 2800; // interval for the fireworks in milliseconds +const minFireworks = 3; // minimum number of simultaneous fireworks +const maxFireworks = 6; // maximum number of simultaneous fireworks +const intervalOfFireworks = 2800; // interval for the fireworks in milliseconds // array of color palettes for the fireworks const colorPalettes = [ @@ -18,6 +18,7 @@ const colorPalettes = [ ]; let msgPrinted = false; // flag to prevent multiple console messages +let spacing = 0; // spacing between fireworks // function to check and control fireworks function toggleFirework() { @@ -140,7 +141,7 @@ function startFireworks() { for (let i = 0; i < randomCount; i++) { launchFirework(); } - }, fireworksInterval); // Interval between fireworks + }, intervalOfFireworks); // Interval between fireworks } // Initialize fireworks and add random fireworks after the DOM is loaded From 54b8bbaf6c8a5c3b218f67c4454a464af266b6be Mon Sep 17 00:00:00 2001 From: CodeDevMLH Date: Fri, 29 Nov 2024 23:32:32 +0100 Subject: [PATCH 6/8] fix test site --- test-site.html | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/test-site.html b/test-site.html index ccf673d..50347a4 100644 --- a/test-site.html +++ b/test-site.html @@ -5,14 +5,17 @@ Fireworks Display + + - + + \ No newline at end of file From 3b9bce2874747b2a13fb815f51fb9a5e8d5a7038 Mon Sep 17 00:00:00 2001 From: CodeDevMLH Date: Sun, 1 Dec 2024 03:09:52 +0100 Subject: [PATCH 7/8] add delay between launches --- fireworks.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/fireworks.js b/fireworks.js index a5bfa51..819e33e 100644 --- a/fireworks.js +++ b/fireworks.js @@ -3,7 +3,7 @@ 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 = 2800; // interval for the fireworks in milliseconds +const intervalOfFireworks = 3200; // interval for the fireworks in milliseconds // array of color palettes for the fireworks const colorPalettes = [ @@ -139,7 +139,9 @@ function startFireworks() { fireworksInterval = setInterval(() => { const randomCount = Math.floor(Math.random() * maxFireworks) + minFireworks; for (let i = 0; i < randomCount; i++) { - launchFirework(); + setTimeout(() => { + launchFirework(); + }, i * 200); // 200ms delay between fireworks } }, intervalOfFireworks); // Interval between fireworks } From 98f3b67b2503c23e0a052665d9deb64d796390f7 Mon Sep 17 00:00:00 2001 From: CodeDevMLH Date: Sat, 7 Dec 2024 18:44:22 +0100 Subject: [PATCH 8/8] toggel on initial --- fireworks.js | 1 + 1 file changed, 1 insertion(+) diff --git a/fireworks.js b/fireworks.js index 819e33e..18fa9c0 100644 --- a/fireworks.js +++ b/fireworks.js @@ -150,4 +150,5 @@ function startFireworks() { document.addEventListener('DOMContentLoaded', () => { if (!fireworks) return; // exit if fireworks are disabled startFireworks(); + toggleFirework(); });