It’s #FrontendFriday – Let it snow mit SASS
Das Jahr neigt sich dem Ende. Es ist Zeit etwas Schnee ins Frontend zu zaubern. Im heutigen #FrontendFriday zeige ich euch wie ihr mit reinem SASS Schnee rieseln lassen könnt.
Leise rieselt der Schnee
Wir wollen nicht einfach nur Schnee fallen lassen. Es sollte schön aussehen, die Flocken sollen unterschiedlich sein und (wie im echten Leben) sollte der Schnee auch möglichst unterschiedlich fallen. Um das zu garantieren, nutzen wir eine Menge unterschiedlicher Hilfsmittel, die uns SASS zur Verfügung stellt. Genau genommen:
- SASS-Funktionen
- Schleifen
- Keyframes
Bevor wir uns den Code genau anschauen, zeige ich euch erst einmal das Ergebnis. Über folgendem codepen Link könnt ihr eine Live-Demo sehen: https://codepen.io/gruenwald/pen/WNZoyEy
It´s beginning to look a lot like Christmas
Doch wie funktioniert alles? Gehen wir mal Schritt für Schritt durch den Code.
1 2 3 4 5 6 |
body { height: 100vh; background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%); overflow: hidden; filter: drop-shadow(0 0 10px white); } |
Im <body> setzen wir den dunklen Hintergrund und geben durch die CSS Funktion radial-gradient ein bisschen weißes Leuchten mit rein. Die drop-shadow Funktion gibt jeder Schneeflocke einen schönen Glüheffekt.
1 2 3 4 5 |
@function random_range($min, $max) { $rand: random(); $random_range: $min + floor($rand * (($max - $min) + 1)); @return $random_range; } |
1 2 3 4 5 6 7 8 9 |
.snow { $total: 400; position: absolute; width: 10px; height: 10px; background: white; border-radius: 50%; ... } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
@for $i from 1 through $total + 1 { $random-x: random(1000000) * 0.0001vw; $random-offset: random_range(-100000, 100000) * 0.0001vw; $random-x-end: $random-x + $random-offset; $random-x-end-yoyo: $random-x + ($random-offset / 2); $random-yoyo-time: random_range(30000, 80000) / 100000; $random-yoyo-y: $random-yoyo-time * 100vh; $random-scale: random(10000) * 0.0001; $fall-duration: random_range(10, 30) * 1s; $fall-delay: random(30) * -1s; &:nth-child(#{$i}) { opacity: random(10000) * 0.0001; transform: translate($random-x, -10px) scale($random-scale); animation: fall-#{$i} $fall-duration $fall-delay linear infinite; } ... } |
Die Magie dahinter ist, dass wir einen zufälligen Wert für:
- die opacity (die Transparenz der einzelnen Schneeflocken)
- im transform bestimmen wir mit translate die Position an dem die einzelne Schneeflocke auftaucht und mit scale die Größe der Schneeflocke
- in animation nutzen wir unserem @keyframe fall-#{$i} um damit zu bestimmen wie unsere Schneeflocke zu Boden fällt
1 2 3 4 5 6 7 8 9 |
@keyframes fall-#{$i} { #{percentage($random-yoyo-time)} { transform: translate($random-x-end, $random-yoyo-y) scale($random-scale); } to { transform: translate($random-x-end-yoyo, 100vh) scale($random-scale); } } |
Last Christmas… #FrontendFriday
Mit diesem #FrontendFriday verabschiedet sich die Webfrontend-AG in den wohlverdienten Urlaub. Wir wünschen allen Lesern einen schönen Urlaub. Habt schöne Weihnachten und einen guten Rutsch in neue Jahr.
Bis zum nächsten #FrontendFriday :)
Mehr zu Frontend Entwicklung erfahren
Quellen
[1] https://sass-lang.com/documentation/modules/math#random[2] https://sass-lang.com/documentation/modules/math#percentage