From 7acc53012cb59476874a986596ea7d625663bb43 Mon Sep 17 00:00:00 2001 From: CodeDevMLH Date: Thu, 19 Dec 2024 00:44:50 +0100 Subject: [PATCH] init with halloween --- add_to_index_html.html | 3 + hearts.css | 145 +++++++++++++++++++++++++++++++++++++++++ hearts.js | 128 ++++++++++++++++++++++++++++++++++++ test-site.html | 22 +++++++ 4 files changed, 298 insertions(+) create mode 100644 add_to_index_html.html create mode 100644 hearts.css create mode 100644 hearts.js create mode 100644 test-site.html diff --git a/add_to_index_html.html b/add_to_index_html.html new file mode 100644 index 0000000..926ced3 --- /dev/null +++ b/add_to_index_html.html @@ -0,0 +1,3 @@ + + +
\ No newline at end of file diff --git a/hearts.css b/hearts.css new file mode 100644 index 0000000..ce959f2 --- /dev/null +++ b/hearts.css @@ -0,0 +1,145 @@ +.halloween-container { + display: block; + pointer-events: none; + z-index: 0; + overflow: hidden; +} + +.halloween { + position: fixed; + bottom: -10%; + z-index: 0; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: default; + -webkit-animation-name: halloween-fall, halloween-shake; + -webkit-animation-duration: 10s, 3s; + -webkit-animation-timing-function: linear, ease-in-out; + -webkit-animation-iteration-count: infinite, infinite; + -webkit-animation-play-state: running, running; + animation-name: halloween-fall, halloween-shake; + animation-duration: 10s, 3s; + animation-timing-function: linear, ease-in-out; + animation-iteration-count: infinite, infinite; + animation-play-state: running, running +} + +@-webkit-keyframes halloween-fall { + 0% { + bottom: -10% + } + + 100% { + bottom: 100% + } +} + +@-webkit-keyframes halloween-shake { + + 0%, + 100% { + -webkit-transform: translateX(0); + transform: translateX(0) + } + + 50% { + -webkit-transform: translateX(80px); + transform: translateX(80px) + } +} + +@keyframes halloween-fall { + 0% { + bottom: -10% + } + + 100% { + bottom: 100% + } +} + +@keyframes halloween-shake { + + 0%, + 100% { + transform: translateX(0) + } + + 50% { + transform: translateX(80px) + } +} + +.halloween:nth-of-type(0) { + left: 1%; + -webkit-animation-delay: 0s, 0s; + animation-delay: 0s, 0s +} + +.halloween:nth-of-type(1) { + left: 10%; + -webkit-animation-delay: 1s, 1s; + animation-delay: 1s, 1s +} + +.halloween:nth-of-type(2) { + left: 20%; + -webkit-animation-delay: 6s, .5s; + animation-delay: 6s, .5s +} + +.halloween:nth-of-type(3) { + left: 30%; + -webkit-animation-delay: 4s, 2s; + animation-delay: 4s, 2s +} + +.halloween:nth-of-type(4) { + left: 40%; + -webkit-animation-delay: 2s, 2s; + animation-delay: 2s, 2s +} + +.halloween:nth-of-type(5) { + left: 50%; + -webkit-animation-delay: 8s, 3s; + animation-delay: 8s, 3s +} + +.halloween:nth-of-type(6) { + left: 60%; + -webkit-animation-delay: 6s, 2s; + animation-delay: 6s, 2s +} + +.halloween:nth-of-type(7) { + left: 70%; + -webkit-animation-delay: 2.5s, 1s; + animation-delay: 2.5s, 1s +} + +.halloween:nth-of-type(8) { + left: 80%; + -webkit-animation-delay: 1s, 0s; + animation-delay: 1s, 0s +} + +.halloween:nth-of-type(9) { + left: 90%; + -webkit-animation-delay: 3s, 1.5s; + animation-delay: 3s, 1.5s +} + +.halloween:nth-of-type(10) { + left: 25%; + -webkit-animation-delay: 2s, 0s; + animation-delay: 2s, 0s +} + +.halloween:nth-of-type(11) { + left: 65%; + -webkit-animation-delay: 4s, 2.5s; + animation-delay: 4s, 2.5s +} \ No newline at end of file diff --git a/hearts.js b/hearts.js new file mode 100644 index 0000000..7583bab --- /dev/null +++ b/hearts.js @@ -0,0 +1,128 @@ +const halloween = true; // enable/disable halloween +const randomSymbols = true; // enable more random symbols +const randomSymbolsMobile = false; // enable random symbols on mobile devices +const halloweenCount = 25; // count of random extra symbols + +let msgPrinted = false; // flag to prevent multiple console messages + +// function to check and control the halloween +function toggleHalloween() { + const halloweenContainer = document.querySelector('.snow-container'); + if (!halloweenContainer) return; + + const videoPlayer = document.querySelector('.videoPlayerContainer'); + const trailerPlayer = document.querySelector('.youtubePlayerContainer'); + const isDashboard = document.body.classList.contains('dashboardDocument'); + const hasUserMenu = document.querySelector('#app-user-menu'); + + // hide halloween if video/trailer player is active or dashboard is visible + if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) { + halloweenContainer.style.display = 'none'; // hide halloween + if (!msgPrinted) { + console.log('Halloween hidden'); + msgPrinted = true; + } + } else { + halloweenContainer.style.display = 'block'; // show halloween + if (msgPrinted) { + console.log('Halloween visible'); + msgPrinted = false; + } + } +} + +// observe changes in the DOM +const observer = new MutationObserver(toggleHalloween); + +// start observation +observer.observe(document.body, { + childList: true, // observe adding/removing of child elements + subtree: true, // observe all levels of the DOM tree + attributes: true // observe changes to attributes (e.g. class changes) +}); + +/* +const images = [ + "/web/seasonal/ghost_20x20.png", + "/web/seasonal/bat_20x20.png", + "/web/seasonal/pumpkin_20x20.png", +];*/ +const images = [ + "./images/ghost_20x20.png", + "./images/bat_20x20.png", + "./images/pumpkin_20x20.png", +]; + +// create halloween objects +function createHalloween() { + const container = document.querySelector('.halloween-container') || document.createElement("div"); + + if (!document.querySelector('.halloween-container')) { + container.className = "halloween-container"; + container.setAttribute("aria-hidden", "true"); + document.body.appendChild(container); + } + + for (let i = 0; i < 4; i++) { + images.forEach(imageSrc => { + const halloweenDiv = document.createElement("div"); + halloweenDiv.className = "halloween"; + + const img = document.createElement("img"); + img.src = imageSrc; + + halloweenDiv.appendChild(img); + container.appendChild(halloweenDiv); + }); + } +} + + +function addRandomSymbols(count) { + const halloweenContainer = document.querySelector('.halloween-container'); // get the halloween container + if (!halloweenContainer) return; // exit if halloween container is not found + + console.log('Adding random halloween symbols'); + + + for (let i = 0; i < count; i++) { + // create a new halloween elements + const halloweenDiv = document.createElement("div"); + halloweenDiv.className = "halloween"; + + // pick a random halloween symbol + const imageSrc = images[Math.floor(Math.random() * images.length)]; + const img = document.createElement("img"); + img.src = imageSrc; + + halloweenDiv.appendChild(img); + + + // set random horizontal position, animation delay and size(uncomment lines to enable) + const randomLeft = Math.random() * 100; // position (0% to 100%) + //const randomSize = Math.random() * 1.5 + 0.5; // size (0.5em to 2em) //uncomment to enable random size + const randomAnimationDelay = Math.random() * 10; // delay (0s to 10s) + const randomAnimationDelay2 = Math.random() * 3; // delay (0s to 3s) + + // apply styles + halloweenDiv.style.left = `${randomLeft}%`; + halloweenDiv.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay2}s`; + + // add the halloween to the container + halloweenContainer.appendChild(halloweenDiv); + } + console.log('Random halloween symbols added'); +} + + +// initialize halloween after the DOM is loaded +document.addEventListener('DOMContentLoaded', () => { + if (!halloween) return; // exit if halloween is disabled + createHalloween(); + toggleHalloween(); + + const screenWidth = window.innerWidth; // get the screen width to detect mobile devices + if (randomSymbols && (screenWidth > 768 || randomSymbolsMobile)) { // add random halloweens only on larger screens, unless enabled for mobile devices + addRandomSymbols(halloweenCount); + } +}); diff --git a/test-site.html b/test-site.html new file mode 100644 index 0000000..779c8c2 --- /dev/null +++ b/test-site.html @@ -0,0 +1,22 @@ + + + + + + Halloween Display + + + + + + + + + + + \ No newline at end of file