diff --git a/seasonals/autumn.css b/seasonals/autumn.css index b1e37ed..129d5bb 100644 --- a/seasonals/autumn.css +++ b/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%; diff --git a/seasonals/autumn.js b/seasonals/autumn.js index b19433c..449668c 100644 --- a/seasonals/autumn.js +++ b/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 - leaveDiv.style.setProperty('--rotate-start', `${randomRotateStart}deg`); - leaveDiv.style.setProperty('--rotate-end', `${randomRotateEnd}deg`); + // 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 - leafDiv.style.setProperty('--rotate-start', `${randomRotateStart}deg`); - leafDiv.style.setProperty('--rotate-end', `${randomRotateEnd}deg`); + // 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);