diff --git a/add_to_index_html.html b/add_to_index_html.html new file mode 100644 index 0000000..85f4bb0 --- /dev/null +++ b/add_to_index_html.html @@ -0,0 +1,18 @@ + + + + + \ No newline at end of file diff --git a/snowflakes.css b/snowflakes.css new file mode 100644 index 0000000..9ddf941 --- /dev/null +++ b/snowflakes.css @@ -0,0 +1,140 @@ + /* Standard-Style */ + .snowflake { + color: #fff; + font-size: 1em; + font-family: Arial, sans-serif; + text-shadow: 0 0 5px #000; + pointer-events: none; + } + + @-webkit-keyframes snowflakes-fall { + 0% { + top: -10%; + } + + 100% { + top: 100%; + } + } + + @-webkit-keyframes snowflakes-shake { + + 0%, + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + + 50% { + -webkit-transform: translateX(80px); + transform: translateX(80px); + } + } + + @keyframes snowflakes-fall { + 0% { + top: -10%; + } + + 100% { + top: 100%; + } + } + + @keyframes snowflakes-shake { + + 0%, + 100% { + transform: translateX(0); + } + + 50% { + transform: translateX(80px); + } + } + + .snowflake { + position: fixed; + top: -10%; + z-index: 0; + -webkit-user-select: none; + user-select: none; + cursor: default; + animation-name: snowflakes-fall, snowflakes-shake; + animation-duration: 10s, 3s; + animation-timing-function: linear, ease-in-out; + animation-iteration-count: infinite, infinite; + } + + .snowflake:nth-of-type(0) { + left: 1%; + animation-delay: 0s, 0s; + } + + .snowflake:nth-of-type(1) { + left: 10%; + animation-delay: 1s, 1s; + } + + .snowflake:nth-of-type(2) { + left: 20%; + animation-delay: 6s, 0.5s; + } + + .snowflake:nth-of-type(3) { + left: 30%; + animation-delay: 4s, 2s; + } + + .snowflake:nth-of-type(4) { + left: 40%; + animation-delay: 2s, 2s; + } + + .snowflake:nth-of-type(5) { + left: 50%; + animation-delay: 8s, 3s; + } + + .snowflake:nth-of-type(6) { + left: 60%; + animation-delay: 6s, 2s; + } + + .snowflake:nth-of-type(7) { + left: 70%; + animation-delay: 2.5s, 1s; + } + + .snowflake:nth-of-type(8) { + left: 80%; + animation-delay: 1s, 0s; + } + + .snowflake:nth-of-type(9) { + left: 90%; + animation-delay: 3s, 1.5s; + } + + .snowflake:nth-of-type(10) { + left: 25%; + animation-delay: 2s, 0s; + } + + .snowflake:nth-of-type(11) { + left: 65%; + animation-delay: 4s, 2.5s; + } + + /* Schneeflocken sichtbar, wenn kein Videoplayer vorhanden */ + .snowflakes { + visibility: visible; + z-index: 0; + pointer-events: none; + } + + /* Schneeflocken ausblenden, wenn Videoplayer aktiv ist */ + .videoPlayerContainer+.snowflakes, + .videoPlayerContainer .snowflakes { + visibility: hidden; + } \ No newline at end of file diff --git a/snowflakes.js b/snowflakes.js new file mode 100644 index 0000000..390ac23 --- /dev/null +++ b/snowflakes.js @@ -0,0 +1,47 @@ +// Beobachte Änderungen an den Attributen des Videoplayer-Containers +observer.observe(videoPlayer, { attributes: true }); + +// Funktion, um die Sichtbarkeit der Schneeflocken zu steuern +function toggleSnowflakes() { + const snowflakes = document.querySelector('.snowflakes'); + const videoPlayer = document.querySelector('.videoPlayerContainer'); + const isDashboard = document.body.classList.contains('dashboardDocument'); + const hasUserMenu = document.querySelector('#app-user-menu'); + + if (videoPlayer || isDashboard || hasUserMenu) { + // Ausblenden, wenn Videoplayer, Dashboard oder User-Menü aktiv sind + snowflakes.style.visibility = 'hidden'; + } else { + // Anzeigen, wenn keine der Bedingungen erfüllt ist + snowflakes.style.visibility = 'visible'; + } +} + +// Beim Laden der Seite ausführen +document.addEventListener('DOMContentLoaded', toggleSnowflakes); + +// Änderungen im DOM überwachen (z. B. Videoplayer hinzugefügt/entfernt) +const observer = new MutationObserver(toggleSnowflakes); +observer.observe(document.body, { childList: true, subtree: true, attributes: true }); + + + + + +// Anzahl der Schneeflocken +const snowflakeCount = 50; + +// Container für Schneeflocken +const snowflakeContainer = document.querySelector('.snowflakes'); + +// Schneeflocken erstellen +for (let i = 0; i < snowflakeCount; i++) { + const snowflake = document.createElement('div'); + snowflake.classList.add('snowflake'); + snowflake.textContent = ['❅', '❆', '❄'][Math.floor(Math.random() * 3)]; // Zufällige Schneeflocke + snowflake.style.left = Math.random() * 100 + '%'; // Zufällige horizontale Position + snowflake.style.animationDelay = Math.random() * 5 + 's'; // Zufällige Verzögerung + snowflake.style.animationDuration = Math.random() * 5 + 5 + 's'; // Zufällige Dauer + snowflake.style.fontSize = Math.random() * 1.5 + 1 + 'em'; // Zufällige Größe + snowflakeContainer.appendChild(snowflake); +} \ No newline at end of file diff --git a/v2.js b/v2.js new file mode 100644 index 0000000..3e69e35 --- /dev/null +++ b/v2.js @@ -0,0 +1,27 @@ +// Funktion zum Überprüfen und Anpassen 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 eines der Elemente vorhanden 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) +}); + +// Initial ausführen, um den aktuellen Zustand zu überprüfen +document.addEventListener('DOMContentLoaded', toggleSnowflakes); \ No newline at end of file