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

add optional rotation

Browse Source
This commit is contained in:
CodeDevMLH
2025-09-28 21:49:36 +02:00
parent 8237696323
commit 2cc615c133
2 changed files with 90 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
seperate single seasonals/Seasonals-Autumn/autumn.css
View File

@@ -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 {
0%,
100% {
transform: translateX(0);
@-webkit-keyframes leaf-shake {
0%, 100% {
-webkit-transform: translateX(0) rotate(var(--rotate-start, -20deg));
}
50% {
-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);
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;
}

43
seperate single seasonals/Seasonals-Autumn/autumn.js
View File

@@ -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 randomAnimationDelay2 = Math.random() * 5; // delay (0s to 5s)
const randomAnimationDelay = Math.random() * 12; // delay for fall (0s to 12s)
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 randomAnimationDuration2 = Math.random() * 5 + 2; // delay (2s to 5s)
leafDiv.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`;
const randomAnimationDuration = Math.random() * 10 + 6; // fall duration (6s to 16s)
const randomAnimationDuration2 = Math.random() * 3 + 2; // shake+rotate duration (2s to 5s)
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 randomAnimationDuration2 = Math.random() * 5 + 2; // delay (2s to 5s)
const randomAnimationDuration = Math.random() * 10 + 6; // fall duration (6s to 16s)
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);
}