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.
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.
@function random_range($min, $max) {
$rand: random();
$random_range: $min + floor($rand * (($max - $min) + 1));
@return $random_range;
}
Unsere random_range Funktion liefert uns einen zufälligen Wert zwischen den beiden übergebenen Werten $min und $max zurück. Dafür nutzen wir die SASS-Funktion random [1] welche uns einen zufälligen Wert zwischen 0 und 1 (mit 10 Nachkommastellen) gibt. Mit ein bisschen Mathematik, bekommen wir somit ein Ergebnis zwischen $min und $max.
.snow {
$total: 400;
position: absolute;
width: 10px;
height: 10px;
background: white;
border-radius: 50%;
...
}
Das Grundstyling der einzelnen Schneeflocken, bevor wir diese randomisieren. Wichtig hierbei ist der Wert in der Variable $total. Diese muss mit der Anzahl der Schneeflocken-Elemente in unserem HTML übereinstimmen.
@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;
}
...
}
Jetzt ist es Zeit die Schneeflocken und alles was dazugehört ein bisschen einzigartig zu gestalten. Dafür nutzen wir neben der SASS-Funktion random auch unsere zuvor erstellte Funktion random_range.
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
@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);
}
}
Um zu bestimmen wie unsere Schneeflocke zu Boden fällt, nutzen wir transform um einen Art JoJo Effekt zu erstellen. Dieser bestimmt wie weit links und rechts die Schneeflocke hin und her pendelt. Dazu geben wir noch eine zufällige Fallgeschwindigkeit mit der SASS-Funktion percentage [2] an und voilà wir haben Schnee.
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
