CodeDevMLH/Seasonals-Fireworks
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

try to set schweif

Browse Source
This commit is contained in:
MLH
2024-11-29 00:50:01 +01:00
parent f32527e79e
commit 3d77207101
2 changed files with 83 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
fireworks.js
View File

@@ -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