Refactor CSS comments and improve observer configuration in spring.js for clarity
This commit is contained in:
@@ -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); }
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
Reference in New Issue
Block a user