Making Snow Animations In Angular 11.0.5

<div class="vertical-track">
	<div class="horizontal-track">
		<span class="flake"> . </span>
	</div>
</div>

// Import the core angular services.
import { Component } from "@angular/core";

// ----------------------------------------------------------------------------------- //
// ----------------------------------------------------------------------------------- //

interface SnowFlakeConfig {
	depth: number ;
	left: number ;
	speed: number ;
}

@Component({
	selector: "app-root",
	styleUrls: [ "./app.component.less" ],
	templateUrl: "./app.component.html"
})
export class AppComponent {

	public snowFlakes: SnowFlakeConfig[];

	// I initialize the app component.
	constructor() {

		this.snowFlakes = [];

		for ( var i = 1 ; i <= 150 ; i++ ) {

			this.snowFlakes.push({
				depth: this.randRange( 1, 5 ),
				left: this.randRange( 0, 100 ),
				speed: this.randRange( 1, 5 )
			});

		}

	}

	// ---
	// PRIVATE METHODS.
	// ---

	// I generate a random integer between the given range, inclusive.
	private randRange( min: number, max: number ) : number {

		var range = ( max - min );

		return( min + Math.round( Math.random() * range ) );


	}

}

<h1>
	Making Snow Animations In Angular 11.0.5
</h1>

<ng-template ngFor let-config [ngForOf]="snowFlakes">

	<snow-flake
		[depth]="config.depth"
		[speed]="config.speed"
		[style.left.vw]="config.left"
	></snow-flake>

</ng-template>

<div class="note">
	Photo from
	<a href="https://wallpaperaccess.com/winter-mountain" target="_blank">wallpaperaccess.com</a>
</div>

// Import the core angular services.
import { ChangeDetectionStrategy } from "@angular/core";
import { Component } from "@angular/core";

// ----------------------------------------------------------------------------------- //
// ----------------------------------------------------------------------------------- //

@Component({
	selector: "snow-flake",
	inputs: [ "depth", "speed" ],
	changeDetection: ChangeDetectionStrategy.OnPush,
	styleUrls: [ "./snow-flake.component.less" ],
	template:
	`
		<div
			[style.animation-duration.s]="verticalDuration"
			[style.animation-delay.s]="verticalDelay"
			class="vertical-track">

			<div
				[style.animation-duration.s]="horizontalDuration"
				[style.animation-delay.s]="horizontalDelay"
				class="horizontal-track">

				<span
					[style.opacity]="flakeOpacity"
					[style.width.px]="flakeSize"
					[style.height.px]="flakeSize"
					class="flake">
				</span>

			</div>

		</div>
	`
})
export class SnowFlakeComponent {

	public depth: number;
	public speed: number;

	public flakeOpacity: number;
	public flakeSize: number;
	public horizontalDuration: number;
	public horizontalDelay: number;
	public verticalDelay: number;
	public verticalDuration: number;

	// I initialize the snow-flake component.
	constructor() {

		this.depth = 1;
		this.speed = 1;

		this.flakeOpacity = 1;
		this.flakeSize = 1;
		this.verticalDuration = 5;
		this.verticalDelay = 0;
		this.horizontalDuration = 3;
		this.horizontalDelay = 0;

	}

	// ---
	// PUBLIC MEHTODS.
	// ---

	// I get called whenever the input bindings change.
	public ngOnChanges() : void {

		switch ( this.speed ) {
			case 1:
				this.verticalDuration = 5;
				this.horizontalDuration = 3;
			break;
			case 2:
				this.verticalDuration = 6;
				this.horizontalDuration = 3;
			break;
			case 3:
				this.verticalDuration = 8;
				this.horizontalDuration = 3.5;
			break;
			case 4:
				this.verticalDuration = 10;
				this.horizontalDuration = 4;
			break;
			case 5:
				this.verticalDuration = 15;
				this.horizontalDuration = 5;
			break;
		}

		// Choose a random offset for the animation so that we fill the screen with snow
		// flakes rather than having them all start together at the top.
		this.verticalDelay = ( Math.random() * -this.verticalDuration );
		this.horizontalDelay = ( Math.random() * -this.horizontalDuration );

		switch ( this.depth ) {
			case 1:
				this.flakeSize = 1;
				this.flakeOpacity = 1;
			break;
			case 2:
				this.flakeSize = 2;
				this.flakeOpacity = 1;
			break;
			case 3:
				this.flakeSize = 3;
				this.flakeOpacity = 0.9;
			break;
			case 4:
				this.flakeSize = 5;
				this.flakeOpacity = 0.5;
			break;
			case 5:
				this.flakeSize = 10;
				this.flakeOpacity = 0.2;
			break;
		}

	}

}

:host {
	display: block ;
	height: 101vh ;
	pointer-events: none ;
	position: fixed ;
	top: -1vh ;
}

.vertical-track {
	animation-delay: 0s ;
	animation-duration: 5s ;
	animation-iteration-count: infinite ;
	animation-name: snow-flake-vertical-animation ;
	animation-timing-function: linear ;
	left: 0px ;
	position: absolute ;
	top: 0px ;
}

.horizontal-track {
	animation-duration: 3s ;
	animation-iteration-count: infinite ;
	animation-name: snow-flake-horizontal-animation ;
	animation-timing-function: ease-in-out ;
	left: 0px ;
	position: absolute ;
	top: 0px ;
}

.flake {
	background-color: #ffffff ;
	border-radius: 20px 20px 20px 20px ;
	display: block ;
	height: 5px ;
	left: 0px ;
	position: absolute ;
	top: 0px ;
	width: 5px ;
}

@keyframes snow-flake-vertical-animation {
	from {
		top: 0% ;
	}
	to {
		top: 100% ;
	}
}

@keyframes snow-flake-horizontal-animation {
	from {
		left: -20px ;
	}
	50% {
		left: 20px ;
	}
	to {
		left: -20px ;
	}
}