working

add_to_index_html.html

@@ -0,0 +1,3 @@
+<div class="snowfall"></div>
+<script src="seasonals/snowfall.js"></script>
+<link rel="stylesheet" href="seasonals/snowfall.css">

snowfall.css

@@ -0,0 +1,8 @@
+.snowflake {
+    position: absolute;
+    background-color: white;
+    /* background-color: rgba(255, 255, 255, 0.8); */
+    border-radius: 50%;
+    pointer-events: none;
+    /* opacity: 0.7; */
+}

snowfall.js

@@ -1,39 +1,37 @@
-const snowflakes = true; // enable/disable snowflakes
+const snowfall = true; // enable/disable snowfall
-const randomSnowflakes = true; // enable random Snowflakes
+const snowflakesCount = 500; // count of snowflakes (recommended values: 300-600)
-const enableColoredSnowflakes = true; // enable colored snowflakes on mobile devices
+const snowFallSpeed = 3; // speed of snowfall	(recommended values: 0-5)
-const snowflakeCount = 25; // count of random extra snowflakes
-
 
 let msgPrinted = false; // flag to prevent multiple console messages
 
-// function to check and control the snowflakes
+// function to check and control the snowfall
-function toggleSnowflakes() {
+function toggleSnowfall() {
-  const snowflakeContainer = document.querySelector('.snowflakes');
+  const snowfallContainer = document.querySelector('.snowfall');
-  if (!snowflakeContainer) return;
+  if (!snowfallContainer) return;
 
   const videoPlayer = document.querySelector('.videoPlayerContainer');
   const trailerPlayer = document.querySelector('.youtubePlayerContainer');
   const isDashboard = document.body.classList.contains('dashboardDocument');
   const hasUserMenu = document.querySelector('#app-user-menu');
 
-  // hide snowflakes if video/trailer player is active or dashboard is visible
+  // hide snowfall if video/trailer player is active or dashboard is visible
   if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
-    snowflakeContainer.style.display = 'none'; // hide snowflakes
+    snowfallContainer.style.display = 'none'; // hide snowfall
     if (!msgPrinted) {
-      console.log('Snowflakes hidden');
+      console.log('Snowfall hidden');
       msgPrinted = true;
     }
   } else {
-    snowflakeContainer.style.display = 'block'; // show snowflakes
+    snowfallContainer.style.display = 'block'; // show snowfall
     if (msgPrinted) {
-      console.log('Snowflakes visible');
+      console.log('Snowfall visible');
       msgPrinted = false;
     }
   }
 }
 
 // observe changes in the DOM
-const observer = new MutationObserver(toggleSnowflakes);
+const observer = new MutationObserver(toggleSnowfall);
 
 // start observation
 observer.observe(document.body, {
@@ -42,51 +40,59 @@ observer.observe(document.body, {
   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
-  
-  console.log('Adding random snowflakes');
 
-  const snowflakeSymbols = ['❅', '❆']; // some snowflake symbols
+function createSnowflakes() {
-  const snowflakeSymbolsMobile = ['❅', '❆', '❄']; // some snowflake symbols mobile version
+  const container = document.getElementById('snowfall');
+  const windowWidth = window.innerWidth;
+  const windowHeight = window.innerHeight;
 
-  for (let i = 0; i < count; i++) {
+  for (let i = 0; i < snowflakesCount; i++) {
-    // create a new snowflake element
     const snowflake = document.createElement('div');
     snowflake.classList.add('snowflake');
 
-    // pick a random snowflake symbol
+    // random size between 1 and 3 pixels
-    if (enableColoredSnowflakes) {
+    const size = Math.random() * 3 + 1;
-      snowflake.textContent = snowflakeSymbolsMobile[Math.floor(Math.random() * snowflakeSymbolsMobile.length)];
+    snowflake.style.width = `${size}px`;
-    } else {
+    snowflake.style.height = `${size}px`;
-      snowflake.textContent = snowflakeSymbols[Math.floor(Math.random() * snowflakeSymbols.length)];
-    }
 
-    // set random horizontal position, animation delay and size(uncomment lines to enable) 
+    // random starting position
-    const randomLeft = Math.random() * 100; // position (0% to 100%)
+    snowflake.style.left = `${Math.random() * windowWidth}px`;
-    //const randomSize = Math.random() * 1.5 + 0.5; // size (0.5em to 2em) //uncomment to enable random size
+    snowflake.style.top = `${Math.random() * windowHeight}px`;
-    const randomAnimationDelay = Math.random() * 8; // delay (0s to 8s)
-    const randomAnimationDelay2 = Math.random() * 5; // delay (0s to 5s)
 
-    // apply styles
+    container.appendChild(snowflake);
-    snowflake.style.left = `${randomLeft}%`;
-    //snowflake.style.fontSize = `${randomSize}em`; //uncomment to enable random size
-    snowflake.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay2}s`;
 
-    // add the snowflake to the container
+    animateSnowflake(snowflake);
-    snowflakeContainer.appendChild(snowflake);
   }
-  console.log('Random snowflakes added');
 }
 
-// initialize snowflakes and add random snowflakes after the DOM is loaded
+function animateSnowflake(snowflake) {
-document.addEventListener('DOMContentLoaded', () => {
+  // Animation Parameter
-  if (!snowflakes) return; // exit if snowflakes are disabled
+  const speed = Math.random() * snowFallSpeed + 1;
-  toggleSnowflakes();
+  // const speed = Math.random() * 3 + 1;
+  const sidewaysMovement = Math.random() * 2 - 1;
 
-  const screenWidth = window.innerWidth; // get the screen width to detect mobile devices
+  function fall() {
-  if (randomSnowflakes && screenWidth > 768) { // add random snowflakes only on larger screens
+      const currentTop = parseFloat(snowflake.style.top || 0);
-      addRandomSnowflakes(snowflakeCount);
+      const currentLeft = parseFloat(snowflake.style.left || 0);
+
+      // fall and sideways movement
+      snowflake.style.top = `${currentTop + speed}px`;
+      snowflake.style.left = `${currentLeft + sidewaysMovement}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();
+}
+
+// initialize snowfall after the DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+  if (!snowfall) return; // exit if snowfall is disabled
+  createSnowflakes();
+});

test-site.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Snowfall Display</title>
+    <link rel="stylesheet" href="snowfall.css">
+    
+    <style>
+        body {
+            background-color: black;
+            overflow: hidden;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="snowfall"></div>
+    <script src="snowfall.js"></script>
+</body>
+
+</html>