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

some fixes

Browse Source
This commit is contained in:
MLH
2024-11-28 23:56:50 +01:00
parent af3ec8c7b4
commit 09cc395467
2 changed files with 23 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
fireworks.css
View File

@@ -1,4 +1,4 @@
/* Der Container für das Feuerwerk */ /* container for fireworks */
.fireworks { .fireworks {
pointer-events: none; pointer-events: none;
position: fixed; position: fixed;
@@ -7,38 +7,38 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
z-index: 10; /* Über andere Elemente legen */ z-index: 10; /* put it on top */
} }
/* Jede Partikel eines Feuerwerks */ /* every firework particle */
.firework { .firework {
position: absolute; position: absolute;
width: 4px; width: 6px;
height: 4px; height: 6px;
border-radius: 50%; border-radius: 50%;
background: rgba(255, 255, 255, 0.9); /* Standardfarbe */ background: rgba(255, 255, 255, 0.9); /* standard colors */
animation: explode 1s ease-out forwards; animation: explode 1s ease-out forwards;
transform-origin: center; transform-origin: center;
} }
/* Animation für die Explosion */ /* animation for the explosion */
@keyframes explode { @keyframes explode {
0% { 0% {
transform: scale(0.5); transform: scale(0.5);
opacity: 1; opacity: 1;
} }
100% { 100% {
transform: translate(var(--x), var(--y)) scale(0.2); transform: translate(var(--x), var(--y)) scale(0.3);
opacity: 0; opacity: 0;
} }
} }
/* Optional: Farbwechsel für die Partikel */ /* optional: different colors for odd and even fireworks */
.firework:nth-child(odd) { .firework:nth-child(odd) {
background: rgba(255, 100, 100, 0.9); /* Rot */ background: rgba(255, 100, 100, 0.9); /* red */
} }
.firework:nth-child(even) { .firework:nth-child(even) {
background: rgba(100, 100, 255, 0.9); /* Blau */ background: rgba(100, 100, 255, 0.9); /* blue */
} }

18
fireworks.js
View File

@@ -1,10 +1,10 @@
const fireworks = true; // enable/disable fireworks const fireworks = true; // enable/disable fireworks
const particlesPerFirework = 30; // count of particles per firework const particlesPerFirework = 50; // count of particles per firework
let msgPrinted = false; // flag to prevent multiple console messages let msgPrinted = false; // flag to prevent multiple console messages
// function to check and control fireworks // function to check and control fireworks
function toggleSnowflakes() { function toggleFirework() {
const fireworksContainer = document.querySelector('.fireworks'); const fireworksContainer = document.querySelector('.fireworks');
if (!fireworksContainer) return; if (!fireworksContainer) return;
@@ -30,7 +30,7 @@ function toggleSnowflakes() {
} }
// observe changes in the DOM // observe changes in the DOM
const observer = new MutationObserver(toggleSnowflakes); const observer = new MutationObserver(toggleFirework);
// start observation // start observation
observer.observe(document.body, { observer.observe(document.body, {
@@ -45,8 +45,9 @@ function launchFirework() {
if (!fireworkContainer) return; if (!fireworkContainer) return;
// random position on the screen // random position on the screen
const x = Math.random() * window.innerWidth; const x = Math.random() * window.innerWidth * 0.8 + window.innerWidth * 0.1;
const y = Math.random() * window.innerHeight; const y = Math.random() * window.innerHeight * 0.7 + window.innerHeight * 0.15;
// create particles for the firework // create particles for the firework
for (let i = 0; i < particlesPerFirework; i++) { for (let i = 0; i < particlesPerFirework; i++) {
@@ -55,7 +56,7 @@ function launchFirework() {
// random angle and distance // random angle and distance
const angle = Math.random() * 2 * Math.PI; // 0 to 360 degrees const angle = Math.random() * 2 * Math.PI; // 0 to 360 degrees
const distance = Math.random() * 100 + 50; // 50 to 150 pixels const distance = Math.random() * 150 + 100; // 50 to 150 pixels
const xOffset = Math.cos(angle) * distance; const xOffset = Math.cos(angle) * distance;
const yOffset = Math.sin(angle) * distance; const yOffset = Math.sin(angle) * distance;
@@ -78,8 +79,11 @@ function launchFirework() {
// automaticly start fireworks // automaticly start fireworks
function startFireworks() { function startFireworks() {
setInterval(() => { setInterval(() => {
const randomCount = Math.random() * 3 + 2; // 2 to 5 fireworks simultaneously
for (let i = 0; i < randomCount; i++) {
launchFirework(); launchFirework();
}, 1000); // firework every second }
}, 600); // firework every 600 mil second
} }
// initialize snowflakes and add random snowflakes after the DOM is loaded // initialize snowflakes and add random snowflakes after the DOM is loaded