Refactor CSS comments and improve observer configuration in spring.js for clarity

This commit is contained in:
CodeDevMLH
2026-02-24 19:24:38 +01:00
parent 306b0c5e6e
commit ad4fb7964b
2 changed files with 8 additions and 6 deletions

View File

@@ -49,7 +49,7 @@
transform-origin: bottom; transform-origin: bottom;
} }
/* HTML Grass Overlayer */ /* Grass Overlayer */
.spring-grass { .spring-grass {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@@ -157,7 +157,6 @@
z-index: 1002; z-index: 1002;
} }
/* Generic Wrappers */
.spring-anim-wrapper { .spring-anim-wrapper {
position: fixed; position: fixed;
z-index: 1001; z-index: 1001;
@@ -225,7 +224,7 @@
100% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY(0) rotate(0deg); }
} }
/* Bee Buzz - Reduced Intensity */ /* Bee Buzz */
@keyframes spring-buzz { @keyframes spring-buzz {
0% { transform: translate(0, 0); } 0% { transform: translate(0, 0); }
25% { transform: translate(2px, -2px); } 25% { transform: translate(2px, -2px); }

View File

@@ -51,7 +51,11 @@ function toggleSpring() {
} }
const observer = new MutationObserver(toggleSpring); const observer = new MutationObserver(toggleSpring);
observer.observe(document.body, { childList: true, subtree: true, attributes: true }); observer.observe(document.body, {
childList: true,
subtree: true,
attributes: true
});
function createPollen(container) { function createPollen(container) {
@@ -145,7 +149,7 @@ function createGrass(container) {
const x = Math.random() * w; const x = Math.random() * w;
const h = 20 + Math.random() * 50; const h = 20 + Math.random() * 50;
const cY = hSVG - h; const cY = hSVG - h;
const bend = x + (Math.random() * 40 - 20); const bend = x + (Math.random() * 15 - 7.5); // curvature
const color = Math.random() > 0.5 ? '#4caf50' : '#45a049'; const color = Math.random() > 0.5 ? '#4caf50' : '#45a049';
const width = 1 + Math.random() * 2; const width = 1 + Math.random() * 2;
const path = `<path d="M ${x} ${hSVG} Q ${bend} ${cY+20} ${bend} ${cY}" stroke="${color}" stroke-width="${width}" fill="none"/>`; const path = `<path d="M ${x} ${hSVG} Q ${bend} ${cY+20} ${bend} ${cY}" stroke="${color}" stroke-width="${width}" fill="none"/>`;
@@ -428,7 +432,6 @@ function createLadybugGif(container) {
bug.style.animation = `spring-crawl 2s ease-in-out infinite`; bug.style.animation = `spring-crawl 2s ease-in-out infinite`;
// Target the Ladybug to walk on the ground visually (aligning properly with the CSS/SVG grass size)
alignY.style.transform = `translateY(calc(100vh - 5px - 30px))`; alignY.style.transform = `translateY(calc(100vh - 5px - 30px))`;
mirror.appendChild(bug); mirror.appendChild(bug);