Improve snow animation in plugin

jlelse · Dec 24, 2024 · 5215d47 · 5215d47
1 parent 0bc6622
commit 5215d47
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 16 deletions.
diff --git a/plugins/snow/src/snow/snow.css b/plugins/snow/src/snow/snow.css
@@ -1,7 +1,6 @@
 .snowflake {
-    position: absolute;
-    top: -10px;
-    font-size: 1.5em;
+    position: fixed;
+    top: -10vh;
     pointer-events: none;
     animation-name: fall;
     animation-timing-function: linear;
@@ -10,12 +9,12 @@
 
 @keyframes fall {
     0% {
-        transform: translateY(-10px) translateX(0);
+        transform: translateY(-10vh) translateX(0);
         opacity: 1;
     }
 
     100% {
-        transform: translateY(95vh) translateX(0);
+        transform: translateY(110vh) translateX(0);
         opacity: 0;
     }
 }
diff --git a/plugins/snow/src/snow/snow.go b/plugins/snow/src/snow/snow.go
@@ -59,9 +59,8 @@ func (p *plugin) RenderWithDocument(_ plugintypes.RenderContext, doc *goquery.Do
 
 const snowCss = `
 .snowflake {
-    position: absolute;
-    top: -10px;
-    font-size: 1.5em;
+    position: fixed;
+    top: -10vh;
     pointer-events: none;
     animation-name: fall;
     animation-timing-function: linear;
@@ -70,12 +69,12 @@ const snowCss = `
 
 @keyframes fall {
     0% {
-        transform: translateY(-10px) translateX(0);
+        transform: translateY(-10vh) translateX(0);
         opacity: 1;
     }
 
     100% {
-        transform: translateY(95vh) translateX(0);
+        transform: translateY(110vh) translateX(0);
         opacity: 0;
     }
 }
@@ -86,14 +85,30 @@ const snowJs = `
     function createSnowflake() {
         const snowflake = document.createElement('div');
         snowflake.classList.add('snowflake');
-        snowflake.style.left = Math.random() * 100 + 'vw';
-        snowflake.style.animationDuration = Math.random() * 10 + 5 + 's';
+
+        const size = Math.random() * 1.5 + 0.5;
+        const left = Math.random() * 98 + 1;
+        const duration = Math.random() * 10 + 5;
+
+        snowflake.style.left = left + 'vw';
+        snowflake.style.fontSize = size + 'em';
+        snowflake.style.animationDuration = duration + 's';
+
         snowflake.innerText = '❄';
         document.body.appendChild(snowflake);
         snowflake.addEventListener('animationend', () => {
             snowflake.remove();
         });
     }
-    setInterval(createSnowflake, 200);
+
+    function calculateInterval(width, baseInterval = 200, referenceWidth = 1000) {
+        return (baseInterval * referenceWidth) / width;
+    }
+
+    let snowflakeInterval = setInterval(createSnowflake, calculateInterval(window.innerWidth));
+    window.addEventListener('resize', () => {
+        clearInterval(snowflakeInterval);
+        snowflakeInterval = setInterval(createSnowflake, calculateInterval(window.innerWidth));
+    });
 })()
 `
diff --git a/plugins/snow/src/snow/snow.js b/plugins/snow/src/snow/snow.js
@@ -2,13 +2,29 @@
     function createSnowflake() {
         const snowflake = document.createElement('div');
         snowflake.classList.add('snowflake');
-        snowflake.style.left = Math.random() * 100 + 'vw';
-        snowflake.style.animationDuration = Math.random() * 10 + 5 + 's';
+
+        const size = Math.random() * 1.5 + 0.5;
+        const left = Math.random() * 98 + 1;
+        const duration = Math.random() * 10 + 5;
+
+        snowflake.style.left = left + 'vw';
+        snowflake.style.fontSize = size + 'em';
+        snowflake.style.animationDuration = duration + 's';
+
         snowflake.innerText = '❄';
         document.body.appendChild(snowflake);
         snowflake.addEventListener('animationend', () => {
             snowflake.remove();
         });
     }
-    setInterval(createSnowflake, 200);
+
+    function calculateInterval(width, baseInterval = 200, referenceWidth = 1000) {
+        return (baseInterval * referenceWidth) / width;
+    }
+
+    let snowflakeInterval = setInterval(createSnowflake, calculateInterval(window.innerWidth));
+    window.addEventListener('resize', () => {
+        clearInterval(snowflakeInterval);
+        snowflakeInterval = setInterval(createSnowflake, calculateInterval(window.innerWidth));
+    });
 })()