add random duration

christmas.js

@@ -1,6 +1,7 @@
 const christmas = true; // enable/disable christmas
 const randomChristmas = true; // enable random Christmas
 const randomChristmasMobile = false; // enable random Christmas on mobile devices
+const enableDiffrentDuration = true; // enable different duration for the random Christmas symbols
 const christmasCount = 25; // count of random extra christmas
 
 
@@ -43,7 +44,7 @@ observer.observe(document.body, {
 });
 
 // Array of christmas characters
-const christmasSymbols = ['❆','🎁', '❄️', '🎁', '🎅' , '🎊','🎁', '🎉'];
+const christmasSymbols = ['❆', '🎁', '❄️', '🎁', '🎅', '🎊', '🎁', '🎉'];
 
 function addRandomChristmas(count) {
   const christmasContainer = document.querySelector('.christmas-container'); // get the christmas container
@@ -58,16 +59,23 @@ function addRandomChristmas(count) {
 
     // pick a random christmas symbol
     christmasDiv.textContent = christmasSymbols[Math.floor(Math.random() * christmasSymbols.length)];
-    
+
     // set random horizontal position, animation delay and size(uncomment lines to enable) 
     const randomLeft = Math.random() * 100; // position (0% to 100%)
-    const randomAnimationDelay = Math.random() * 8; // delay (0s to 8s)
+    const randomAnimationDelay = Math.random() * 12 + 8; // delay (8s to 12s)
-    const randomAnimationDelay2 = Math.random() * 5; // delay (0s to 5s)
+    const randomAnimationDelay2 = Math.random() * 5 + 3; // delay (0s to 5s)
 
     // apply styles
     christmasDiv.style.left = `${randomLeft}%`;
     christmasDiv.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay2}s`;
 
+    // set random animation duration
+    if (enableDiffrentDuration) {
+      const randomAnimationDuration = Math.random() * 10 + 6; // delay (6s to 10s)
+      const randomAnimationDuration2 = Math.random() * 5 + 2; // delay (2s to 5s)
+      christmasDiv.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`;
+    }
+
     // add the christmas to the container
     christmasContainer.appendChild(christmasDiv);
   }
@@ -90,6 +98,13 @@ function initChristmas() {
     christmasDiv.className = 'christmas';
     christmasDiv.textContent = christmasSymbols[Math.floor(Math.random() * christmasSymbols.length)];
 
+    // set random animation duration
+    if (enableDiffrentDuration) {
+      const randomAnimationDuration = Math.random() * 10 + 6; // delay (6s to 10s)
+      const randomAnimationDuration2 = Math.random() * 5 + 2; // delay (2s to 5s)
+      christmasDiv.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`;
+    }
+
     christmasContainer.appendChild(christmasDiv);
   }
 }