random snowflakes and observer

snowflakes.css

@@ -1,140 +1,133 @@
- /* Standard-Style */
- .snowflake {
-   color: #fff;
-   font-size: 1em;
-   font-family: Arial, sans-serif;
-   text-shadow: 0 0 5px #000;
-   pointer-events: none;
- }
+.snowflakes {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 0;
+  overflow: hidden;
+  visibility: visible;
+}
 
- @-webkit-keyframes snowflakes-fall {
-   0% {
-     top: -10%;
-   }
+.snowflake {
+  position: fixed;
+  top: -10%;
+  font-size: 1em;
+  color: #fff;
+  font-family: Arial, sans-serif;
+  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;
+}
 
-   100% {
-     top: 100%;
-   }
- }
+@-webkit-keyframes snowflakes-fall {
+  0% {
+    top: -10%;
+  }
 
- @-webkit-keyframes snowflakes-shake {
+  100% {
+    top: 100%;
+  }
+}
 
-   0%,
-   100% {
-     -webkit-transform: translateX(0);
-     transform: translateX(0);
-   }
+@-webkit-keyframes snowflakes-shake {
 
-   50% {
-     -webkit-transform: translateX(80px);
-     transform: translateX(80px);
-   }
- }
+  0%,
+  100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
 
- @keyframes snowflakes-fall {
-   0% {
-     top: -10%;
-   }
+  50% {
+    -webkit-transform: translateX(80px);
+    transform: translateX(80px);
+  }
+}
 
-   100% {
-     top: 100%;
-   }
- }
+@keyframes snowflakes-fall {
+  0% {
+    top: -10%;
+  }
 
- @keyframes snowflakes-shake {
+  100% {
+    top: 100%;
+  }
+}
 
-   0%,
-   100% {
-     transform: translateX(0);
-   }
+@keyframes snowflakes-shake {
 
-   50% {
-     transform: translateX(80px);
-   }
- }
+  0%,
+  100% {
+    transform: translateX(0);
+  }
 
- .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;
- }
+  50% {
+    transform: translateX(80px);
+  }
+}
 
- .snowflake:nth-of-type(0) {
-   left: 1%;
-   animation-delay: 0s, 0s;
- }
+.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(1) {
+  left: 10%;
+  animation-delay: 1s, 1s;
+}
 
- .snowflake:nth-of-type(2) {
-   left: 20%;
-   animation-delay: 6s, 0.5s;
- }
+.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(3) {
+  left: 30%;
+  animation-delay: 4s, 2s;
+}
 
- .snowflake:nth-of-type(4) {
-   left: 40%;
-   animation-delay: 2s, 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(5) {
+  left: 50%;
+  animation-delay: 8s, 3s;
+}
 
- .snowflake:nth-of-type(6) {
-   left: 60%;
-   animation-delay: 6s, 2s;
- }
+.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(7) {
+  left: 70%;
+  animation-delay: 2.5s, 1s;
+}
 
- .snowflake:nth-of-type(8) {
-   left: 80%;
-   animation-delay: 1s, 0s;
- }
+.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(9) {
+  left: 90%;
+  animation-delay: 3s, 1.5s;
+}
 
- .snowflake:nth-of-type(10) {
-   left: 25%;
-   animation-delay: 2s, 0s;
- }
+.snowflake:nth-of-type(10) {
+  left: 25%;
+  animation-delay: 2s, 0s;
+}
 
- .snowflake:nth-of-type(11) {
-   left: 65%;
-   animation-delay: 4s, 2.5s;
- }
+.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;
- }
+body.hide-snowflakes .snowflakes {
+  visibility: hidden;
+}

snowflakes.js

@@ -1,47 +1,65 @@
-// Beobachte Änderungen an den Attributen des Videoplayer-Containers
-observer.observe(videoPlayer, { attributes: true });
+let randomSnowflakes = flase; // enable random Snowflakes
+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
-    snowflakes.style.visibility = 'hidden';
+      body.classList.add('hide-snowflakes');
   } else {
-    // Anzeigen, wenn keine der Bedingungen erfüllt ist
-    snowflakes.style.visibility = 'visible';
+      body.classList.remove('hide-snowflakes');
   }
 }
 
-// Beim Laden der Seite ausführen
-document.addEventListener('DOMContentLoaded', toggleSnowflakes);
-
-// Änderungen im DOM überwachen (z. B. Videoplayer hinzugefügt/entfernt)
+// observe changes in the DOM
 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++) {
+      // create a new snowflake element
+      const snowflake = document.createElement('div');
+      snowflake.classList.add('snowflake');
 
-// Anzahl der Schneeflocken
-const snowflakeCount = 50;
+      // pick a random snowflake symbol
+      snowflake.textContent = snowflakeSymbols[Math.floor(Math.random() * snowflakeSymbols.length)];
 
-// Container für Schneeflocken
-const snowflakeContainer = document.querySelector('.snowflakes');
+      // 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)
 
-// 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);
-}
+      // 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,15 +1,15 @@
-// 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');
+    body.classList.add('hide-snowflakes');
   } else {
-      body.classList.remove('hide-snowflakes');
+    body.classList.remove('hide-snowflakes');
   }
 }
 
@@ -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
-document.addEventListener('DOMContentLoaded', toggleSnowflakes);
+// Initiale Überprüfung
+document.addEventListener('DOMContentLoaded', toggleSnowflakes);