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

rotate leaf

Browse Source
This commit is contained in:
CodeDevMLH
2025-09-28 21:15:30 +02:00
parent 96e15fa11b
commit b3a531e3a9
2 changed files with 33 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
seasonals/autumn.css
View File

@@ -16,12 +16,12 @@
-webkit-user-select: none; -webkit-user-select: none;
cursor: default; cursor: default;
-webkit-animation-name: leaf-fall, leaf-shake; -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-timing-function: linear, ease-in-out;
-webkit-animation-iteration-count: infinite, infinite; -webkit-animation-iteration-count: infinite, infinite;
-webkit-user-select: none; -webkit-user-select: none;
animation-name: leaf-fall, leaf-shake; animation-name: leaf-fall, leaf-shake;
animation-duration: 7s, 3s; animation-duration: 7s, 4s;
animation-timing-function: linear, ease-in-out; animation-timing-function: linear, ease-in-out;
animation-iteration-count: infinite, infinite; animation-iteration-count: infinite, infinite;
} }
@@ -36,20 +36,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 { @keyframes leaf-fall {
0% { 0% {
top: -10%; top: -10%;
@@ -60,15 +46,21 @@
} }
} }
@keyframes leaf-shake { @-webkit-keyframes leaf-shake {
0%, 100% {
0%, -webkit-transform: translateX(0) rotate(-15deg);
100% {
transform: translateX(0);
} }
50% { 50% {
transform: translateX(80px); -webkit-transform: translateX(80px) rotate(15deg);
}
}
@keyframes leaf-shake {
0%, 100% {
transform: translateX(0) rotate(-15deg);
}
50% {
transform: translateX(80px) rotate(15deg);
} }
} }
@@ -79,55 +71,55 @@
.leaf:nth-of-type(1) { .leaf:nth-of-type(1) {
left: 10%; left: 10%;
animation-delay: 1s, 1s; animation-delay: 1s, 0.5s;
} }
.leaf:nth-of-type(2) { .leaf:nth-of-type(2) {
left: 20%; left: 20%;
animation-delay: 6s, 0.5s; animation-delay: 6s, 1s;
} }
.leaf:nth-of-type(3) { .leaf:nth-of-type(3) {
left: 30%; left: 30%;
animation-delay: 4s, 2s; animation-delay: 4s, 1.5s;
} }
.leaf:nth-of-type(4) { .leaf:nth-of-type(4) {
left: 40%; left: 40%;
animation-delay: 2s, 2s; animation-delay: 2s, 0.8s;
} }
.leaf:nth-of-type(5) { .leaf:nth-of-type(5) {
left: 50%; left: 50%;
animation-delay: 8s, 3s; animation-delay: 8s, 2s;
} }
.leaf:nth-of-type(6) { .leaf:nth-of-type(6) {
left: 60%; left: 60%;
animation-delay: 6s, 2s; animation-delay: 6s, 1.2s;
} }
.leaf:nth-of-type(7) { .leaf:nth-of-type(7) {
left: 70%; left: 70%;
animation-delay: 2.5s, 1s; animation-delay: 2.5s, 0.3s;
} }
.leaf:nth-of-type(8) { .leaf:nth-of-type(8) {
left: 80%; left: 80%;
animation-delay: 1s, 0s; animation-delay: 1s, 1.8s;
} }
.leaf:nth-of-type(9) { .leaf:nth-of-type(9) {
left: 90%; left: 90%;
animation-delay: 3s, 1.5s; animation-delay: 3s, 0.7s;
} }
.leaf:nth-of-type(10) { .leaf:nth-of-type(10) {
left: 25%; left: 25%;
animation-delay: 2s, 0s; animation-delay: 2s, 2.3s;
} }
.leaf:nth-of-type(11) { .leaf:nth-of-type(11) {
left: 65%; left: 65%;
animation-delay: 4s, 2.5s; animation-delay: 4s, 1.4s;
} }

14
seasonals/autumn.js
View File

@@ -86,8 +86,8 @@ function addRandomLeaves(count) {
// set random horizontal position, animation delay and size(uncomment lines to enable) // set random horizontal position, animation delay and size(uncomment lines to enable)
const randomLeft = Math.random() * 100; // position (0% to 100%) 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 // apply styles
leaveDiv.style.left = `${randomLeft}%`; leaveDiv.style.left = `${randomLeft}%`;
@@ -95,9 +95,9 @@ function addRandomLeaves(count) {
// set random animation duration // set random animation duration
if (enableDiffrentDuration) { 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`;
} }
// add the leave to the container // add the leave to the container
@@ -125,8 +125,8 @@ function initLeaves() {
// set random animation duration // set random animation duration
if (enableDiffrentDuration) { 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`; leafDiv.style.animationDuration = `${randomAnimationDuration}s, ${randomAnimationDuration2}s`;
} }