diff --git a/snowflakes.css b/snowflakes.css index d65f8a8..5059297 100644 --- a/snowflakes.css +++ b/snowflakes.css @@ -1,13 +1,8 @@ .snowflakes { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; + display: block; pointer-events: none; z-index: 0; overflow: hidden; - visibility: visible; } .snowflake { @@ -19,7 +14,11 @@ text-shadow: 0 0 5px #000; user-select: none; -webkit-user-select: none; - animation: snowflakes-fall 10s linear infinite, snowflakes-shake 3s ease-in-out infinite; + cursor: default; + animation-name: snowflakes-fall, snowflakes-shake; + animation-duration: 10s, 3s; + animation-timing-function: linear, ease-in-out; + animation-iteration-count: infinite, infinite; } @-webkit-keyframes snowflakes-fall { @@ -126,8 +125,4 @@ .snowflake:nth-of-type(11) { left: 65%; animation-delay: 4s, 2.5s; -} - -body.hide-snowflakes .snowflakes { - visibility: hidden; } \ No newline at end of file diff --git a/snowflakes.js b/snowflakes.js index de83f3b..4aec48f 100644 --- a/snowflakes.js +++ b/snowflakes.js @@ -1,19 +1,21 @@ -let randomSnowflakes = flase; // enable random Snowflakes +const randomSnowflakes = flase; // enable random Snowflakes const snowflakeCount = 50; // count of random extra snowflakes // function to check and control the snowflakes function toggleSnowflakes() { - const body = document.body; + const snowflakeContainer = document.querySelector('.snowflakes'); + if (!snowflakeContainer) return; + const videoPlayer = document.querySelector('.videoPlayerContainer'); - const isDashboard = body.classList.contains('dashboardDocument'); + const isDashboard = document.body.classList.contains('dashboardDocument'); const hasUserMenu = document.querySelector('#app-user-menu'); // hide snowflakes if video player is active or dashboard is visible if (videoPlayer || isDashboard || hasUserMenu) { - body.classList.add('hide-snowflakes'); + snowflakeContainer.style.display = 'none'; // hide snowflakes } else { - body.classList.remove('hide-snowflakes'); + snowflakeContainer.style.display = 'block'; // show snowflakes } } @@ -34,32 +36,30 @@ function addRandomSnowflakes(count) { const snowflakeSymbols = ['❅', '❆', '❄']; // some snowflake symbols for (let i = 0; i < count; i++) { - // create a new snowflake element - const snowflake = document.createElement('div'); - snowflake.classList.add('snowflake'); + // create a new snowflake element + const snowflake = document.createElement('div'); + snowflake.classList.add('snowflake'); - // pick a random snowflake symbol - snowflake.textContent = snowflakeSymbols[Math.floor(Math.random() * snowflakeSymbols.length)]; + // pick a random snowflake symbol + snowflake.textContent = snowflakeSymbols[Math.floor(Math.random() * snowflakeSymbols.length)]; - // set random horizontal position, size and animation delay - const randomLeft = Math.random() * 100; // position (0% to 100%) - const randomSize = Math.random() * 1.5 + 0.5; // size (0.5em to 2em) - const randomAnimationDelay = Math.random() * 5; // delay (0s to 5s) + // set random horizontal position, size and animation delay + const randomLeft = Math.random() * 100; // position (0% to 100%) + //const randomSize = Math.random() * 1.5 + 0.5; // size (0.5em to 2em) + const randomAnimationDelay = Math.random() * 5; // delay (0s to 5s) - // apply styles - snowflake.style.left = `${randomLeft}%`; - snowflake.style.fontSize = `${randomSize}em`; - snowflake.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay / 2}s`; + // apply styles + snowflake.style.left = `${randomLeft}%`; + //snowflake.style.fontSize = `${randomSize}em`; + snowflake.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay / 2}s`; - // add the snowflake to the container - snowflakeContainer.appendChild(snowflake); + // add the snowflake to the container + snowflakeContainer.appendChild(snowflake); } } // initialize snowflakes -document.addEventListener('DOMContentLoaded', () => { - toggleSnowflakes(); //check if snowflakes should be hidden - if (randomSnowflakes) { - addRandomSnowflakes(snowflakeCount); //add random snowflakes - } -}); \ No newline at end of file +toggleSnowflakes(); //check if snowflakes should be hidden +if (randomSnowflakes) { + addRandomSnowflakes(snowflakeCount); //add random snowflakes +} \ No newline at end of file diff --git a/v2.js b/v2.js deleted file mode 100644 index b164a76..0000000 --- a/v2.js +++ /dev/null @@ -1,27 +0,0 @@ -// Funktion zum Überprüfen und Steuern der Schneeflocken -function toggleSnowflakes() { - const body = document.body; - const videoPlayer = document.querySelector('.videoPlayerContainer'); - const isDashboard = body.classList.contains('dashboardDocument'); - const hasUserMenu = document.querySelector('#app-user-menu'); - - // Schneeflocken ausblenden, wenn Videoplayer aktiv ist oder Dashboard sichtbar ist - if (videoPlayer || isDashboard || hasUserMenu) { - body.classList.add('hide-snowflakes'); - } else { - body.classList.remove('hide-snowflakes'); - } -} - -// Beobachte Änderungen im DOM -const observer = new MutationObserver(toggleSnowflakes); - -// Beobachtung starten -observer.observe(document.body, { - childList: true, // Überwacht Hinzufügen/Entfernen von Kindelementen - subtree: true, // Überwacht alle Ebenen des DOM-Baums - attributes: true // Überwacht Änderungen an Attributen (z. B. Klassenänderungen) -}); - -// Initiale Überprüfung -document.addEventListener('DOMContentLoaded', toggleSnowflakes);