add optional rotating

seasonals/autumn.css

@@ -26,6 +26,12 @@
   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%;

seasonals/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
 
 
@@ -74,7 +75,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)];
@@ -100,11 +101,17 @@ function addRandomLeaves(count) {
       leaveDiv.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`;
     }
 
-    // set random rotation angles
-    const randomRotateStart = -(Math.random() * 40 + 20); // 10deg to 30deg
-    const randomRotateEnd = Math.random() * 40 + 20; // -10deg to -30deg
+    // 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
     autumnContainer.appendChild(leaveDiv);
@@ -124,7 +131,7 @@ 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)];
@@ -136,11 +143,17 @@ function initLeaves() {
       leafDiv.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`;
     }
 
-    // set random rotation angles for standard leaves too
-    const randomRotateStart = -(Math.random() * 40 + 20); // 10deg to 30deg
-    const randomRotateEnd = Math.random() * 40 + 20; // -10deg to -30deg
+    // 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);