random snowflakes and observer

snowflakes.css

@@ -1,10 +1,25 @@
- /* Standard-Style */
+.snowflakes {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 0;
+  overflow: hidden;
+  visibility: visible;
+}
+
 .snowflake {
-   color: #fff;
+  position: fixed;
+  top: -10%;
   font-size: 1em;
+  color: #fff;
   font-family: Arial, sans-serif;
   text-shadow: 0 0 5px #000;
-   pointer-events: none;
+  user-select: none;
+  -webkit-user-select: none;
+  animation: snowflakes-fall 10s linear infinite, snowflakes-shake 3s ease-in-out infinite;
 }
 
 @-webkit-keyframes snowflakes-fall {
@@ -53,19 +68,6 @@
   }
 }
 
- .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;
@@ -126,15 +128,6 @@
   animation-delay: 4s, 2.5s;
 }
 
- /* Schneeflocken sichtbar, wenn kein Videoplayer vorhanden */
+body.hide-snowflakes .snowflakes {
- .snowflakes {
-   visibility: visible;
-   z-index: 0;
-   pointer-events: none;
- }
-
- /* Schneeflocken ausblenden, wenn Videoplayer aktiv ist */
- .videoPlayerContainer+.snowflakes,
- .videoPlayerContainer .snowflakes {
   visibility: hidden;
 }

snowflakes.js

@@ -1,47 +1,65 @@
-// Beobachte Änderungen an den Attributen des Videoplayer-Containers
+let randomSnowflakes = flase; // enable random Snowflakes
-observer.observe(videoPlayer, { attributes: true });
+const snowflakeCount = 50; // count of random extra snowflakes
 
-// Funktion, um die Sichtbarkeit der Schneeflocken zu steuern
+
+// function to check and control the snowflakes
 function toggleSnowflakes() {
-  const snowflakes = document.querySelector('.snowflakes');
+  const body = document.body;
   const videoPlayer = document.querySelector('.videoPlayerContainer');
-  const isDashboard = document.body.classList.contains('dashboardDocument');
+  const isDashboard = 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) {
-    // Ausblenden, wenn Videoplayer, Dashboard oder User-Menü aktiv sind
+      body.classList.add('hide-snowflakes');
-    snowflakes.style.visibility = 'hidden';
   } else {
-    // Anzeigen, wenn keine der Bedingungen erfüllt ist
+      body.classList.remove('hide-snowflakes');
-    snowflakes.style.visibility = 'visible';
   }
 }
 
-// Beim Laden der Seite ausführen
+// observe changes in the DOM
-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 });
 
+// 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)
+});
 
+function addRandomSnowflakes(count) {
+  const snowflakeContainer = document.querySelector('.snowflakes'); // get the snowflake container
+  if (!snowflakeContainer) return; // exit if snowflake container is not found
 
+  const snowflakeSymbols = ['❅', '❆', '❄']; // some snowflake symbols
 
-
+  for (let i = 0; i < count; i++) {
-// Anzahl der Schneeflocken
+      // create a new snowflake element
-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
+      // pick a random snowflake symbol
-  snowflake.style.animationDelay = Math.random() * 5 + 's'; // Zufällige Verzögerung
+      snowflake.textContent = snowflakeSymbols[Math.floor(Math.random() * snowflakeSymbols.length)];
-  snowflake.style.animationDuration = Math.random() * 5 + 5 + 's'; // Zufällige Dauer
+
-  snowflake.style.fontSize = Math.random() * 1.5 + 1 + 'em'; // Zufällige Größe
+      // 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`;
+
+      // 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
+  }
+});

v2.js

@@ -1,11 +1,11 @@
-// Funktion zum Überprüfen und Anpassen der Schneeflocken
+// 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 eines der Elemente vorhanden ist
+  // Schneeflocken ausblenden, wenn Videoplayer aktiv ist oder Dashboard sichtbar ist
   if (videoPlayer || isDashboard || hasUserMenu) {
     body.classList.add('hide-snowflakes');
   } else {
@@ -23,5 +23,5 @@ observer.observe(document.body, {
   attributes: true    // Überwacht Änderungen an Attributen (z. B. Klassenänderungen)
 });
 
-// Initial ausführen, um den aktuellen Zustand zu überprüfen
+// Initiale Überprüfung
 document.addEventListener('DOMContentLoaded', toggleSnowflakes);