feat(home): add snow

2026-03-09 10:15:26 +00:00 · 2021-12-23 13:16:43 +00:00
parent 0192a50d25
commit 1233eee138
4 changed files with 200 additions and 63 deletions
--- a/src/pages/home/snow.scss
+++ b/src/pages/home/snow.scss
@@ -0,0 +1,89 @@
+// Pure CSS Snowfall
+// Released by Artimon under MIT license
+
+$count: 36;
+$screenOffset: 0px;
+$fallDuration: 12;
+$windNoise: 30;
+$windSpeed: 4;
+$sizeNoise: 40;
+$rotation: 360;
+$imageSize: 20px;
+$fontSize: 40px;
+
+.snowfall {
+    z-index: 0;
+    display: block;
+
+    font-size: $fontSize;
+
+    overflow: hidden;
+    pointer-events: none;
+
+    .snowflake {
+        position: relative;
+        top: 0;
+        left: 0;
+
+        display: flex;
+        justify-content: center;
+
+        width: $screenOffset;
+        height: $screenOffset;
+
+        span {
+            align-self: center;
+        }
+
+        img {
+            align-self: center;
+            width: $imageSize;
+        }
+    }
+
+    @while ($count > 0) {
+        $left: random(100);
+        $deltaLeft: random(2 * $windNoise * 10) / 10 - $windNoise + $windSpeed;
+        $scale: 1 + (random(2 * $sizeNoise * 10) / 10 - $sizeNoise) / 100;
+
+        .snowflake:nth-child(#{$count}) {
+            animation: animation-snowflake-#{$count} linear infinite;
+            animation-duration: $fallDuration +
+                random($fallDuration * 10) /
+                10 +
+                s;
+            animation-delay: random(2 * $fallDuration * 10) /
+                10 -
+                (2 * $fallDuration) +
+                s;
+        }
+
+        @keyframes animation-snowflake-#{$count} {
+            0% {
+                left: percentage($left / 100);
+                top: calc(0% - #{$screenOffset});
+                transform: scale($scale)
+                    rotate3d(
+                        random(100) / 100,
+                        random(100) / 100,
+                        random(100) / 100,
+                        0deg
+                    );
+            }
+            100% {
+                left: percentage(($left + $deltaLeft) / 100);
+                top: calc(100% + #{$screenOffset});
+                transform: scale($scale)
+                    rotate3d(
+                        random(100) / 100,
+                        random(100) / 100,
+                        random(100) / 100,
+                        (random($rotation) + $rotation) *
+                            ((random(2) - 1) * 2 - 1) + deg
+                    );
+            }
+        }
+
+        $count: $count - 1;
+    }
+}