Türchen 24: SCSS Schnee Animation

Oh Wow! Schon der 24.? Frohe Weihnachten an Alle, die das hier lesen! Groß vorbereitet haben wir uns auf diesen Adventskalender und nun ist er schon wieder vorbei. 🙁

Als letztes Türchen haben wir euch mal eine kleine Spielerei mitgebracht. Hier eine, mal wieder, super kurze Anleitung für eine reine SCSS Schnee Animation.

Der HTML Part

Der HTML Part ist ziemlich simpel. Im Endeffekt brauchen wir nur einen Schnee-Container, den wir dann in unserem SCSS ansprechen können.

<div class="snow"></div>

Schnee Herstellung im SCSS

Der erste Trick ist es eine For-Schleife zu schreiben, die unseren Schnee über Verläufe generiert.

$density: 70;
$size: 1000;
$speed: 10s;

/* Schnee über Verläufe generieren */
$grad: ();
@for $i from 0 to $density {
  $v: random(4) + 2;
  $alpha: random(5) * .1 + .5;
  $grad: $grad, radial-gradient(
      $v+px $v+px at
      (random($size - $v * 2) + $v)+px
      (random($size - $v * 2) + $v)+px,
      rgba(255, 255, 255, $alpha) 50%,
      rgba(0, 0, 0, 0)
  ) !global;
}

Das eigentliche CSS

Nachdem wir unseren Schnee mithilfe einer SCSS-Funktion generieren lassen haben, können wir uns nun dem stinknormalen CSS widmen. Das wird noch zusätzlich benötigt, damit alles im Endeffekt so aussieht und funktioniert, wie es sein sollt.

/* Das eigentliche CSS */

html {
  height: 100%;
  background: linear-gradient(160deg,rgb(135,211,53) 20%,rgb(73,212,253) 80%);
  overflow: hidden;
}

.snow, .snow:before, .snow:after {
  position: absolute;
  top: -$size + px;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: $grad;
  background-size: $size + px $size + px;
  animation: snow $speed linear infinite;
  content: "";
}

.snow:after {
  margin-left: -$size/3 + px;
  opacity: .4;
  animation-duration: $speed*2;
  animation-direction: reverse;
  filter: blur(3px);
}

.snow:before {
  animation-duration: $speed*3;
  animation-direction: reverse;
  margin-left: -$size/2 + px;
  opacity: .65;
  filter: blur(1.5px);
}

@keyframes snow {
  to {
    transform: translateY($size + px);
  }
}

Tadaaa!

Und schon sind wir fertig! Haben wir zu viel versprochen, als wir sagten, dass es schnell geht? Ich glaube nicht. Hier könnt ihr euch das Zauberwerk einmal als Codepen direkt angucken:

See the Pen Türchen 24: SCSS Schnee Animation by code-x GmbH (@codex-pb) on CodePen.