Build an Angular component to display snow ❄️ effect

#angular #typescript

2020 is about to an end, and the holiday session is coming. It was such a particular year for you and me. I have been staying in Singapore for more than eight months without traveling anywhere else. Probably, I will not be able to come back home for our upcoming Tet holiday. But tough times will make us stronger, I believe so :)

Jira clone snow theme

I did a quick snow theme for Jira Clone based on an awesome codepen, written purely with CSS.

That's my result -> https://jira.trungk18.com/project/issue/2020

Snow component

So let go ahead and create a new SnowComponent. We don't need to do anything with that component. The heavy lifting part is the template and styling.

import { Component } from '@angular/core'

@Component({
  selector: 'app-snow',
  templateUrl: './snow.component.html',
  styleUrls: ['./snow.component.css'],
})
export class SnowComponent {}

Open the scss file, and paste the below code. Basically, each snowflake will have a random position, opacity, and delay. And we applied it by generating different keyframe animation.

The code looks pretty short, but the CSS compiled version could be huge. 😂

@function random_range($min, $max) {
  $rand: random();
  $random_range: $min + floor($rand * (($max - $min) + 1));
  @return $random_range;
}

.snow {
  $total: 200;
  position: absolute;
  width: 20px;
  height: 20px;
  font-size: 20px;
  border-radius: 50%;
  pointer-events: none;
  color: #a3b1bc;

  @for $i from 1 through $total {
    $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(8000) * 0.0001;
      transform: translate($random-x, -10px) scale($random-scale);
      animation: fall-#{$i} $fall-duration $fall-delay linear infinite;
    }

    @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);
      }
    }
  }
}

And last, the snow template. It is just a bunch of <div class="snow">, the exact number of div should be equal to the $total variable we defined on the styling.

<div class="snow">❅</div>
<div class="snow">❅</div>
<div class="snow">❅</div>
<div class="snow">❅</div>
<div class="snow">❅</div>
<!-- code remove for brevity -->