From 22a4a615d8dcf7af123bf94e18e663b24b9c3771 Mon Sep 17 00:00:00 2001 From: CodeDevMLH Date: Fri, 20 Dec 2024 02:36:55 +0100 Subject: [PATCH] changed name from halloween --- hearts.css | 44 +++++++++++++------------- hearts.js | 92 ++++++++++++++++++++++++++---------------------------- 2 files changed, 66 insertions(+), 70 deletions(-) diff --git a/hearts.css b/hearts.css index ce959f2..c80651b 100644 --- a/hearts.css +++ b/hearts.css @@ -1,11 +1,11 @@ -.halloween-container { +.hearts-container { display: block; pointer-events: none; z-index: 0; overflow: hidden; } -.halloween { +.heart { position: fixed; bottom: -10%; z-index: 0; @@ -14,19 +14,19 @@ -ms-user-select: none; user-select: none; cursor: default; - -webkit-animation-name: halloween-fall, halloween-shake; - -webkit-animation-duration: 10s, 3s; + -webkit-animation-name: heart-fall, heart-shake; + -webkit-animation-duration: 16s, 5s; -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-name: heart-fall, heart-shake; + animation-duration: 16s, 5s; animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite, infinite; animation-play-state: running, running } -@-webkit-keyframes halloween-fall { +@-webkit-keyframes heart-fall { 0% { bottom: -10% } @@ -36,7 +36,7 @@ } } -@-webkit-keyframes halloween-shake { +@-webkit-keyframes heart-shake { 0%, 100% { @@ -50,7 +50,7 @@ } } -@keyframes halloween-fall { +@keyframes heart-fall { 0% { bottom: -10% } @@ -60,7 +60,7 @@ } } -@keyframes halloween-shake { +@keyframes heart-shake { 0%, 100% { @@ -72,73 +72,73 @@ } } -.halloween:nth-of-type(0) { +.heart:nth-of-type(0) { left: 1%; -webkit-animation-delay: 0s, 0s; animation-delay: 0s, 0s } -.halloween:nth-of-type(1) { +.heart:nth-of-type(1) { left: 10%; -webkit-animation-delay: 1s, 1s; animation-delay: 1s, 1s } -.halloween:nth-of-type(2) { +.heart:nth-of-type(2) { left: 20%; -webkit-animation-delay: 6s, .5s; animation-delay: 6s, .5s } -.halloween:nth-of-type(3) { +.heart:nth-of-type(3) { left: 30%; -webkit-animation-delay: 4s, 2s; animation-delay: 4s, 2s } -.halloween:nth-of-type(4) { +.heart:nth-of-type(4) { left: 40%; -webkit-animation-delay: 2s, 2s; animation-delay: 2s, 2s } -.halloween:nth-of-type(5) { +.heart:nth-of-type(5) { left: 50%; -webkit-animation-delay: 8s, 3s; animation-delay: 8s, 3s } -.halloween:nth-of-type(6) { +.heart:nth-of-type(6) { left: 60%; -webkit-animation-delay: 6s, 2s; animation-delay: 6s, 2s } -.halloween:nth-of-type(7) { +.heart:nth-of-type(7) { left: 70%; -webkit-animation-delay: 2.5s, 1s; animation-delay: 2.5s, 1s } -.halloween:nth-of-type(8) { +.heart:nth-of-type(8) { left: 80%; -webkit-animation-delay: 1s, 0s; animation-delay: 1s, 0s } -.halloween:nth-of-type(9) { +.heart:nth-of-type(9) { left: 90%; -webkit-animation-delay: 3s, 1.5s; animation-delay: 3s, 1.5s } -.halloween:nth-of-type(10) { +.heart:nth-of-type(10) { left: 25%; -webkit-animation-delay: 2s, 0s; animation-delay: 2s, 0s } -.halloween:nth-of-type(11) { +.heart:nth-of-type(11) { left: 65%; -webkit-animation-delay: 4s, 2.5s; animation-delay: 4s, 2.5s diff --git a/hearts.js b/hearts.js index 7583bab..e9f2cde 100644 --- a/hearts.js +++ b/hearts.js @@ -1,38 +1,38 @@ -const halloween = true; // enable/disable halloween +const hearts = true; // enable/disable hearts const randomSymbols = true; // enable more random symbols const randomSymbolsMobile = false; // enable random symbols on mobile devices -const halloweenCount = 25; // count of random extra symbols +const heartsCount = 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; +// function to check and control the hearts +function toggleHearts() { + const heartsContainer = document.querySelector('.snow-container'); + if (!heartsContainer) 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 + // hide hearts if video/trailer player is active or dashboard is visible if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) { - halloweenContainer.style.display = 'none'; // hide halloween + heartsContainer.style.display = 'none'; // hide hearts if (!msgPrinted) { - console.log('Halloween hidden'); + console.log('Hearts hidden'); msgPrinted = true; } } else { - halloweenContainer.style.display = 'block'; // show halloween + heartsContainer.style.display = 'block'; // show hearts if (msgPrinted) { - console.log('Halloween visible'); + console.log('Hearts visible'); msgPrinted = false; } } } // observe changes in the DOM -const observer = new MutationObserver(toggleHalloween); +const observer = new MutationObserver(toggleHearts); // start observation observer.observe(document.body, { @@ -44,85 +44,81 @@ observer.observe(document.body, { /* 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", + "./images/heart_20x20.png", ]; -// create halloween objects -function createHalloween() { - const container = document.querySelector('.halloween-container') || document.createElement("div"); +// create hearts objects +function createHearts() { + const container = document.querySelector('.hearts-container') || document.createElement("div"); - if (!document.querySelector('.halloween-container')) { - container.className = "halloween-container"; + if (!document.querySelector('.hearts-container')) { + container.className = "hearts-container"; container.setAttribute("aria-hidden", "true"); document.body.appendChild(container); } - for (let i = 0; i < 4; i++) { + for (let i = 0; i < 12; i++) { images.forEach(imageSrc => { - const halloweenDiv = document.createElement("div"); - halloweenDiv.className = "halloween"; + const heartsDiv = document.createElement("div"); + heartsDiv.className = "hearts"; const img = document.createElement("img"); img.src = imageSrc; - halloweenDiv.appendChild(img); - container.appendChild(halloweenDiv); + heartsDiv.appendChild(img); + container.appendChild(heartsDiv); }); } } function addRandomSymbols(count) { - const halloweenContainer = document.querySelector('.halloween-container'); // get the halloween container - if (!halloweenContainer) return; // exit if halloween container is not found + const heartsContainer = document.querySelector('.hearts-container'); // get the hearts container + if (!heartsContainer) return; // exit if hearts container is not found - console.log('Adding random halloween symbols'); + console.log('Adding random hearts symbols'); for (let i = 0; i < count; i++) { - // create a new halloween elements - const halloweenDiv = document.createElement("div"); - halloweenDiv.className = "halloween"; + // create a new hearts elements + const heartsDiv = document.createElement("div"); + heartsDiv.className = "hearts"; - // pick a random halloween symbol + // pick a random hearts symbol const imageSrc = images[Math.floor(Math.random() * images.length)]; const img = document.createElement("img"); img.src = imageSrc; - halloweenDiv.appendChild(img); + heartsDiv.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) + const randomAnimationDelay = Math.random() * 16; // delay (0s to 16s) + const randomAnimationDelay2 = Math.random() * 5; // delay (0s to 5s) // apply styles - halloweenDiv.style.left = `${randomLeft}%`; - halloweenDiv.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay2}s`; + heartsDiv.style.left = `${randomLeft}%`; + heartsDiv.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay2}s`; - // add the halloween to the container - halloweenContainer.appendChild(halloweenDiv); + // add the hearts to the container + heartsContainer.appendChild(heartsDiv); } - console.log('Random halloween symbols added'); + console.log('Random hearts symbols added'); } -// initialize halloween after the DOM is loaded +// initialize hearts after the DOM is loaded document.addEventListener('DOMContentLoaded', () => { - if (!halloween) return; // exit if halloween is disabled - createHalloween(); - toggleHalloween(); + if (!hearts) return; // exit if hearts is disabled + createHearts(); + toggleHearts(); 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); + if (randomSymbols && (screenWidth > 768 || randomSymbolsMobile)) { // add random heartss only on larger screens, unless enabled for mobile devices + addRandomSymbols(heartsCount); } });