fix: improve fireworks display handling for scrolling and container positioning
This commit is contained in:
@@ -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++) {
|
||||||
|
|||||||
Reference in New Issue
Block a user