working

snowstorm.css

@@ -1,41 +1,7 @@
-/* styles.css */
-.snow-container {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    z-index: 9999;
-}
-
 .snowflake {
     position: absolute;
-    top: -10px;
+    background-color: rgba(255, 255, 255, 0.8);
-    width: 10px;
-    height: 10px;
-    background: white;
     border-radius: 50%;
-    opacity: 0.9;
+    pointer-events: none;
-    animation: fly diagonal infinite, spin linear infinite;
+    opacity: 0.7;
-}
-
-/* Schneeflocken fliegen diagonal von rechts oben nach links unten */
-@keyframes fly {
-    0% {
-        transform: translate(100vw, -10px); /* Startposition: Rechts oben */
-    }
-    100% {
-        transform: translate(-10vw, 110vh); /* Endposition: Links unten */
-    }
-}
-
-/* Drehen der Schneeflocken für mehr Dynamik */
-@keyframes spin {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
 }

snowstorm.js

@@ -1,10 +1,11 @@
 const snowstorm = true; // enable/disable snowstorm
+const snowflakesCount = 500; // count of snowflakes
 let msgPrinted = false; // flag to prevent multiple console messages
 
 // function to check and control the snowflakes
-function toggleSnowflakes() {
+function toggleSnowstorm() {
-  const snowflakeContainer = document.querySelector('.snow-container');
+  const snowstormContainer = document.querySelector('.snow-container');
-  if (!snowflakeContainer) return;
+  if (!snowstormContainer) return;
 
   const videoPlayer = document.querySelector('.videoPlayerContainer');
   const trailerPlayer = document.querySelector('.youtubePlayerContainer');
@@ -13,13 +14,13 @@ function toggleSnowflakes() {
 
   // hide snowflakes if video/trailer player is active or dashboard is visible
   if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
-    snowflakeContainer.style.display = 'none'; // hide snowflakes
+    snowstormContainer.style.display = 'none'; // hide snowstorm
     if (!msgPrinted) {
       console.log('Snowstorm hidden');
       msgPrinted = true;
     }
   } else {
-    snowflakeContainer.style.display = 'block'; // show snowflakes
+    snowstormContainer.style.display = 'block'; // show snowstorm
     if (msgPrinted) {
       console.log('Snowstorm visible');
       msgPrinted = false;
@@ -28,7 +29,7 @@ function toggleSnowflakes() {
 }
 
 // observe changes in the DOM
-const observer = new MutationObserver(toggleSnowflakes);
+const observer = new MutationObserver(toggleSnowstorm);
 
 // start observation
 observer.observe(document.body, {
@@ -38,39 +39,58 @@ observer.observe(document.body, {
 });
 
 
-function createSnowflake() {
+function createSnowstorm() {
+  const container = document.getElementById('snow-container');
+  const windowWidth = window.innerWidth;
+  const windowHeight = window.innerHeight;
 
-  // Schneeflocken-Container
+  for (let i = 0; i < snowflakesCount; i++) {
-  const snowContainer = document.querySelector(".snow-container");
+    const snowflake = document.createElement('div');
-  const snowflake = document.createElement("div");
+    snowflake.classList.add('snowflake');
-  snowflake.classList.add("snowflake");
 
-  // Zufällige Größe
+    // random size
-  const size = Math.random() * 10 + 5; // Schneeflocken sind zwischen 5px und 15px groß
+    const size = Math.random() * 4 + 1;
-  snowflake.style.width = `${size}px`;
+    snowflake.style.width = `${size}px`;
-  snowflake.style.height = `${size}px`;
+    snowflake.style.height = `${size}px`;
 
-  // Zufällige Startposition (nur oben rechts)
+    // random starting position
-  snowflake.style.top = `${Math.random() * 20 - 10}px`; // Leicht variieren um -10px bis 10px
+    snowflake.style.left = `${Math.random() * windowWidth}px`;
-  snowflake.style.right = `${Math.random() * 20}px`;
+    snowflake.style.top = `${Math.random() * windowHeight}px`;
 
-  // Zufällige Dauer der Animation
+    container.appendChild(snowflake);
-  const flightDuration = Math.random() * 2 + 1; // Sehr schnell: 1-3 Sekunden
-  snowflake.style.animationDuration = `${flightDuration}s`;
 
-  // Flocke zum Container hinzufügen
+    animateSnowflake(snowflake);
-  snowContainer.appendChild(snowflake);
+  }
-
-  // Entfernen der Flocke nach der Animation
-  snowflake.addEventListener("animationend", () => {
-    snowflake.remove();
-  });
 }
 
+function animateSnowflake(snowflake) {
+  // animation parameters
+  const fallSpeed = Math.random() * 5 + 2;
+  const horizontalWind = Math.random() * 4 - 2;
+  const verticalVariation = Math.random() * 2 - 1;
+
+  function fall() {
+    const currentTop = parseFloat(snowflake.style.top || 0);
+    const currentLeft = parseFloat(snowflake.style.left || 0);
+
+    snowflake.style.top = `${currentTop + fallSpeed + verticalVariation}px`;
+    snowflake.style.left = `${currentLeft + horizontalWind}px`;
+
+    // if snowflake is out of the window, reset its position
+    if (currentTop > window.innerHeight) {
+      snowflake.style.top = '0px';
+      snowflake.style.left = `${Math.random() * window.innerWidth}px`;
+    }
+
+    requestAnimationFrame(fall);
+  }
+
+  fall();
+}
+
+createSnowstorm();
 
 document.addEventListener('DOMContentLoaded', () => {
-  if (!snowstorm) return; // exit if fireworks are disabled
+  if (!snowstorm) return; // exit if snowstorm is disabled
-  createSnowflake();
+  createSnowstorm();
-  // Jede 50ms eine neue Schneeflocke erzeugen
-  setInterval(createSnowflake, 50);
 });

test-site.html

@@ -9,12 +9,13 @@
     <style>
         body {
             background-color: black;
+            overflow: hidden;
         }
     </style>
 </head>
 
 <body>
-    <div class="snow-container"></div>
+    <div id="snow-container"></div>
     <script src="snowstorm.js"></script>
 </body>