From da5a51ca7cda512c0f72fa99955c1ef89ea989dc Mon Sep 17 00:00:00 2001 From: CodeDevMLH Date: Fri, 29 Nov 2024 22:49:00 +0100 Subject: [PATCH] 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 +});