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

..

Browse Source
This commit is contained in:
MLH
2024-12-22 00:20:53 +01:00
parent f882ee75c9
commit 29f5a4837a
1 changed files with 18 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
halloween.js
View File

@@ -1,6 +1,7 @@
const halloween = true; // enable/disable halloween const halloween = true; // enable/disable halloween
const randomSymbols = true; // enable more random symbols const randomSymbols = true; // enable more random symbols
const randomSymbolsMobile = false; // enable random symbols on mobile devices const randomSymbolsMobile = false; // enable random symbols on mobile devices
const enableDiffrentDuration = true; // enable different duration for the random halloween symbols
const halloweenCount = 25; // count of random extra symbols const halloweenCount = 25; // count of random extra symbols
let msgPrinted = false; // flag to prevent multiple console messages let msgPrinted = false; // flag to prevent multiple console messages
@@ -43,9 +44,9 @@ observer.observe(document.body, {
const images = [ const images = [
"./seasonals/halloween_images/ghost_20x20.png", "./seasonals/halloween_images/ghost_20x20.png",
"./seasonals/halloween_images/bat_20x20.png", "./seasonals/halloween_images/bat_20x20.png",
"./seasonals/halloween_images/pumpkin_20x20.png", "./seasonals/halloween_images/pumpkin_20x20.png",
]; ];
// remove commented out image array to enable test site working, comment out above images array for that // remove commented out image array to enable test site working, comment out above images array for that
@@ -86,6 +87,13 @@ function addRandomSymbols(count) {
halloweenDiv.style.left = `${randomLeft}%`; halloweenDiv.style.left = `${randomLeft}%`;
halloweenDiv.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay2}s`; halloweenDiv.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay2}s`;
// set random animation duration
if (enableDiffrentDuration) {
const randomAnimationDuration = Math.random() * 10 + 6; // delay (6s to 10s)
const randomAnimationDuration2 = Math.random() * 5 + 2; // delay (2s to 5s)
halloweenDiv.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`;
}
// add the halloween to the container // add the halloween to the container
halloweenContainer.appendChild(halloweenDiv); halloweenContainer.appendChild(halloweenDiv);
} }
@@ -110,6 +118,13 @@ function createHalloween() {
const img = document.createElement("img"); const img = document.createElement("img");
img.src = imageSrc; img.src = imageSrc;
// set random animation duration
if (enableDiffrentDuration) {
const randomAnimationDuration = Math.random() * 10 + 6; // delay (6s to 10s)
const randomAnimationDuration2 = Math.random() * 5 + 2; // delay (2s to 5s)
halloweenDiv.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`;
}
halloweenDiv.appendChild(img); halloweenDiv.appendChild(img);
container.appendChild(halloweenDiv); container.appendChild(halloweenDiv);
}); });