add optional rotation

seperate single seasonals/Seasonals-Autumn/autumn.css

@@ -16,16 +16,22 @@
   -webkit-user-select: none;
   cursor: default;
   -webkit-animation-name: leaf-fall, leaf-shake;
-  -webkit-animation-duration: 7s, 3s;
+  -webkit-animation-duration: 7s, 4s;
   -webkit-animation-timing-function: linear, ease-in-out;
   -webkit-animation-iteration-count: infinite, infinite;
   -webkit-user-select: none;
   animation-name: leaf-fall, leaf-shake;
-  animation-duration: 7s, 3s;
+  animation-duration: 7s, 4s;
   animation-timing-function: linear, ease-in-out;
   animation-iteration-count: infinite, infinite;
 }
 
+/* Class to disable rotation */
+.no-rotation {
+  --rotate-start: 0deg !important;
+  --rotate-end: 0deg !important;
+}
+
 @-webkit-keyframes leaf-fall {
   0% {
     top: -10%;
@@ -36,20 +42,6 @@
   }
 }
 
-@-webkit-keyframes leaf-shake {
-
-  0%,
-  100% {
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
-  }
-
-  50% {
-    -webkit-transform: translateX(80px);
-    transform: translateX(80px);
-  }
-}
-
 @keyframes leaf-fall {
   0% {
     top: -10%;
@@ -60,74 +52,104 @@
   }
 }
 
-@keyframes leaf-shake {
+@-webkit-keyframes leaf-shake {
-
+  0%, 100% {
-  0%,
+    -webkit-transform: translateX(0) rotate(var(--rotate-start, -20deg));
-  100% {
-    transform: translateX(0);
   }
-
   50% {
-    transform: translateX(80px);
+    -webkit-transform: translateX(80px) rotate(var(--rotate-end, 20deg));
+  }
+}
+
+@keyframes leaf-shake {
+  0%, 100% {
+    transform: translateX(0) rotate(var(--rotate-start, -20deg));
+  }
+  50% {
+    transform: translateX(80px) rotate(var(--rotate-end, 20deg));
   }
 }
 
 .leaf:nth-of-type(0) {
   left: 0%;
   animation-delay: 0s, 0s;
+  --rotate-start: -25deg;
+  --rotate-end: 22deg;
 }
 
 .leaf:nth-of-type(1) {
   left: 10%;
-  animation-delay: 1s, 1s;
+  animation-delay: 1s, 0.5s;
+  --rotate-start: -32deg;
+  --rotate-end: 35deg;
 }
 
 .leaf:nth-of-type(2) {
   left: 20%;
-  animation-delay: 6s, 0.5s;
+  animation-delay: 6s, 1s;
+  --rotate-start: -28deg;
+  --rotate-end: 28deg;
 }
 
 .leaf:nth-of-type(3) {
   left: 30%;
-  animation-delay: 4s, 2s;
+  animation-delay: 4s, 1.5s;
+  --rotate-start: -38deg;
+  --rotate-end: 32deg;
 }
 
 .leaf:nth-of-type(4) {
   left: 40%;
-  animation-delay: 2s, 2s;
+  animation-delay: 2s, 0.8s;
+  --rotate-start: -22deg;
+  --rotate-end: 38deg;
 }
 
 .leaf:nth-of-type(5) {
   left: 50%;
-  animation-delay: 8s, 3s;
+  animation-delay: 8s, 2s;
+  --rotate-start: -35deg;
+  --rotate-end: 25deg;
 }
 
 .leaf:nth-of-type(6) {
   left: 60%;
-  animation-delay: 6s, 2s;
+  animation-delay: 6s, 1.2s;
+  --rotate-start: -40deg;
+  --rotate-end: 40deg;
 }
 
 .leaf:nth-of-type(7) {
   left: 70%;
-  animation-delay: 2.5s, 1s;
+  animation-delay: 2.5s, 0.3s;
+  --rotate-start: -30deg;
+  --rotate-end: 30deg;
 }
 
 .leaf:nth-of-type(8) {
   left: 80%;
-  animation-delay: 1s, 0s;
+  animation-delay: 1s, 1.8s;
+  --rotate-start: -26deg;
+  --rotate-end: 36deg;
 }
 
 .leaf:nth-of-type(9) {
   left: 90%;
-  animation-delay: 3s, 1.5s;
+  animation-delay: 3s, 0.7s;
+  --rotate-start: -34deg;
+  --rotate-end: 24deg;
 }
 
 .leaf:nth-of-type(10) {
   left: 25%;
-  animation-delay: 2s, 0s;
+  animation-delay: 2s, 2.3s;
+  --rotate-start: -29deg;
+  --rotate-end: 33deg;
 }
 
 .leaf:nth-of-type(11) {
   left: 65%;
-  animation-delay: 4s, 2.5s;
+  animation-delay: 4s, 1.4s;
+  --rotate-start: -37deg;
+  --rotate-end: 27deg;
 }

seperate single seasonals/Seasonals-Autumn/autumn.js

@@ -2,6 +2,7 @@ const leaves = true; // enable/disable leaves
 const randomLeaves = true; // enable random leaves
 const randomLeavesMobile = false; // enable random leaves on mobile devices
 const enableDiffrentDuration = true; // enable different duration for the random leaves
+const enableRotation = false; // enable/disable leaf rotation
 const leafCount = 25; // count of random extra leaves
 
 
@@ -97,7 +98,7 @@ function addRandomLeaves(count) {
   for (let i = 0; i < count; i++) {
     // create a new leave element
     const leaveDiv = document.createElement('div');
-    leaveDiv.className = "leaf";
+    leaveDiv.className = enableRotation ? "leaf" : "leaf no-rotation";
 
     // pick a random leaf symbol
     const imageSrc = images[Math.floor(Math.random() * images.length)];
@@ -109,8 +110,8 @@ function addRandomLeaves(count) {
 
     // 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() * 12; // delay (0s to 12s)
+    const randomAnimationDelay = Math.random() * 12; // delay for fall (0s to 12s)
-    const randomAnimationDelay2 = Math.random() * 5; // delay (0s to 5s)
+    const randomAnimationDelay2 = Math.random() * 4; // delay for shake+rotate (0s to 4s)
 
     // apply styles
     leaveDiv.style.left = `${randomLeft}%`;
@@ -118,9 +119,21 @@ function addRandomLeaves(count) {
 
     // set random animation duration
     if (enableDiffrentDuration) {
-      const randomAnimationDuration = Math.random() * 10 + 6; // delay (6s to 10s)
+      const randomAnimationDuration = Math.random() * 10 + 6; // fall duration (6s to 16s)
-      const randomAnimationDuration2 = Math.random() * 5 + 2; // delay (2s to 5s)
+      const randomAnimationDuration2 = Math.random() * 3 + 2; // shake+rotate duration (2s to 5s)
-      leafDiv.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`;
+      leaveDiv.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`;
+    }
+
+    // set random rotation angles (only if rotation is enabled)
+    if (enableRotation) {
+      const randomRotateStart = -(Math.random() * 40 + 20); // -20deg to -60deg
+      const randomRotateEnd = Math.random() * 40 + 20; // 20deg to 60deg
+      leaveDiv.style.setProperty('--rotate-start', `${randomRotateStart}deg`);
+      leaveDiv.style.setProperty('--rotate-end', `${randomRotateEnd}deg`);
+    } else {
+      // No rotation - set to 0 degrees
+      leaveDiv.style.setProperty('--rotate-start', '0deg');
+      leaveDiv.style.setProperty('--rotate-end', '0deg');
     }
 
     // add the leave to the container
@@ -141,18 +154,30 @@ function initLeaves() {
 
   for (let i = 0; i < 12; i++) {
     const leafDiv = document.createElement("div");
-    leafDiv.className = "leaf";
+    leafDiv.className = enableRotation ? "leaf" : "leaf no-rotation";
 
     const img = document.createElement("img");
     img.src = images[Math.floor(Math.random() * images.length)];
 
     // set random animation duration
     if (enableDiffrentDuration) {
-      const randomAnimationDuration = Math.random() * 10 + 6; // delay (6s to 10s)
+      const randomAnimationDuration = Math.random() * 10 + 6; // fall duration (6s to 16s)
-      const randomAnimationDuration2 = Math.random() * 5 + 2; // delay (2s to 5s)
+      const randomAnimationDuration2 = Math.random() * 3 + 2; // shake+rotate duration (2s to 5s)
       leafDiv.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`;
     }
 
+    // set random rotation angles for standard leaves too (only if rotation is enabled)
+    if (enableRotation) {
+      const randomRotateStart = -(Math.random() * 40 + 20); // -20deg to -60deg
+      const randomRotateEnd = Math.random() * 40 + 20; // 20deg to 60deg
+      leafDiv.style.setProperty('--rotate-start', `${randomRotateStart}deg`);
+      leafDiv.style.setProperty('--rotate-end', `${randomRotateEnd}deg`);
+    } else {
+      // No rotation - set to 0 degrees
+      leafDiv.style.setProperty('--rotate-start', '0deg');
+      leafDiv.style.setProperty('--rotate-end', '0deg');
+    }
+
     leafDiv.appendChild(img);
     container.appendChild(leafDiv);
   }