CodeDevMLH/Seasonals
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add optional rotating

Browse Source
This commit is contained in:
CodeDevMLH
2025-09-28 21:46:51 +02:00
parent b519ad0db2
commit 8237696323
2 changed files with 31 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
seasonals/autumn.css
View File

@@ -26,6 +26,12 @@
animation-iteration-count: infinite, infinite; animation-iteration-count: infinite, infinite;
} }
/* Class to disable rotation */
.no-rotation {
--rotate-start: 0deg !important;
--rotate-end: 0deg !important;
}
@-webkit-keyframes leaf-fall { @-webkit-keyframes leaf-fall {
0% { 0% {
top: -10%; top: -10%;

37
seasonals/autumn.js
View File

@@ -2,6 +2,7 @@ const leaves = true; // enable/disable leaves
const randomLeaves = true; // enable random leaves const randomLeaves = true; // enable random leaves
const randomLeavesMobile = false; // enable random leaves on mobile devices const randomLeavesMobile = false; // enable random leaves on mobile devices
const enableDiffrentDuration = true; // enable different duration for the random leaves 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 const leafCount = 25; // count of random extra leaves
@@ -74,7 +75,7 @@ function addRandomLeaves(count) {
for (let i = 0; i < count; i++) { for (let i = 0; i < count; i++) {
// create a new leave element // create a new leave element
const leaveDiv = document.createElement('div'); const leaveDiv = document.createElement('div');
leaveDiv.className = "leaf"; leaveDiv.className = enableRotation ? "leaf" : "leaf no-rotation";
// pick a random leaf symbol // pick a random leaf symbol
const imageSrc = images[Math.floor(Math.random() * images.length)]; const imageSrc = images[Math.floor(Math.random() * images.length)];
@@ -100,11 +101,17 @@ function addRandomLeaves(count) {
leaveDiv.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`; leaveDiv.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`;
} }
// set random rotation angles // set random rotation angles (only if rotation is enabled)
const randomRotateStart = -(Math.random() * 40 + 20); // 10deg to 30deg if (enableRotation) {
const randomRotateEnd = Math.random() * 40 + 20; // -10deg to -30deg const randomRotateStart = -(Math.random() * 40 + 20); // -20deg to -60deg
leaveDiv.style.setProperty('--rotate-start', `${randomRotateStart}deg`); const randomRotateEnd = Math.random() * 40 + 20; // 20deg to 60deg
leaveDiv.style.setProperty('--rotate-end', `${randomRotateEnd}deg`); 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 // add the leave to the container
autumnContainer.appendChild(leaveDiv); autumnContainer.appendChild(leaveDiv);
@@ -124,7 +131,7 @@ function initLeaves() {
for (let i = 0; i < 12; i++) { for (let i = 0; i < 12; i++) {
const leafDiv = document.createElement("div"); const leafDiv = document.createElement("div");
leafDiv.className = "leaf"; leafDiv.className = enableRotation ? "leaf" : "leaf no-rotation";
const img = document.createElement("img"); const img = document.createElement("img");
img.src = images[Math.floor(Math.random() * images.length)]; img.src = images[Math.floor(Math.random() * images.length)];
@@ -136,11 +143,17 @@ function initLeaves() {
leafDiv.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`; leafDiv.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`;
} }
// set random rotation angles for standard leaves too // set random rotation angles for standard leaves too (only if rotation is enabled)
const randomRotateStart = -(Math.random() * 40 + 20); // 10deg to 30deg if (enableRotation) {
const randomRotateEnd = Math.random() * 40 + 20; // -10deg to -30deg const randomRotateStart = -(Math.random() * 40 + 20); // -20deg to -60deg
leafDiv.style.setProperty('--rotate-start', `${randomRotateStart}deg`); const randomRotateEnd = Math.random() * 40 + 20; // 20deg to 60deg
leafDiv.style.setProperty('--rotate-end', `${randomRotateEnd}deg`); 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); leafDiv.appendChild(img);
container.appendChild(leafDiv); container.appendChild(leafDiv);