fix: improve fireworks display handling for scrolling and container positioning

This commit is contained in:
CodeDevMLH
2025-12-30 02:09:18 +01:00
parent 8c00a35a22
commit 0db833c4dc

View File

@@ -42,6 +42,11 @@ function toggleFirework() {
} }
} else { } else {
fireworksContainer.style.display = 'block'; // show fireworks fireworksContainer.style.display = 'block'; // show fireworks
if (scrollFireworks) {
fireworksContainer.style.height = `${document.documentElement.scrollHeight}px`;
}
if (msgPrinted) { if (msgPrinted) {
console.log('Fireworks visible'); console.log('Fireworks visible');
startFireworks(); startFireworks();
@@ -117,8 +122,8 @@ function launchFirework() {
let startY, endY; let startY, endY;
if (scrollFireworks) { if (scrollFireworks) {
// Y-position considers scrolling // Y-position considers scrolling
startY = window.scrollY + window.innerHeight; // Bottom edge of the window plus the scroll offset startY = window.scrollY + window.innerHeight;
endY = Math.random() * window.innerHeight * 0.5 + window.innerHeight * 0.2 + window.scrollY; // Area around the middle, but also with scrolling endY = window.scrollY + (Math.random() * window.innerHeight * 0.5 + window.innerHeight * 0.2);
} else { } else {
startY = window.innerHeight; // Bottom edge of the window startY = window.innerHeight; // Bottom edge of the window
endY = Math.random() * window.innerHeight * 0.5 + window.innerHeight * 0.2; // Area around the middle endY = Math.random() * window.innerHeight * 0.5 + window.innerHeight * 0.2; // Area around the middle
@@ -135,15 +140,27 @@ function launchFirework() {
// Start the firework routine // Start the firework routine
function startFireworks() { function startFireworks() {
const fireworkContainer = document.querySelector('.fireworks') || document.createElement("div"); let fireworkContainer = document.querySelector('.fireworks');
if (!document.querySelector('.fireworks')) { if (!fireworkContainer) {
fireworkContainer = document.createElement("div");
fireworkContainer.className = "fireworks"; fireworkContainer.className = "fireworks";
fireworkContainer.setAttribute("aria-hidden", "true"); fireworkContainer.setAttribute("aria-hidden", "true");
fireworkContainer.style.position = scrollFireworks ? 'absolute' : 'fixed';
document.body.appendChild(fireworkContainer); document.body.appendChild(fireworkContainer);
} }
fireworkContainer.style.position = scrollFireworks ? 'absolute' : 'fixed';
if (scrollFireworks) {
fireworkContainer.style.height = `${document.documentElement.scrollHeight}px`;
fireworkContainer.style.width = '100%';
fireworkContainer.style.top = '0';
fireworkContainer.style.left = '0';
} else {
fireworkContainer.style.height = '100%';
fireworkContainer.style.width = '100%';
}
fireworksInterval = setInterval(() => { fireworksInterval = setInterval(() => {
const randomCount = Math.floor(Math.random() * maxFireworks) + minFireworks; const randomCount = Math.floor(Math.random() * maxFireworks) + minFireworks;
for (let i = 0; i < randomCount; i++) { for (let i = 0; i < randomCount; i++) {