Skip to content

A dynamically generated snow animation, written in TypeScript

License

Notifications You must be signed in to change notification settings

J-Puls/canvas-snowstorm

Repository files navigation

☃ canvas-snowstorm ☃

A dynamically generated HTML Canvas snow animation, written in TypeScript.

View live preview

Installation

npm i canvas-snowstorm

Development

Ensure TypeScript is enabled:

tsc -version

To build, run:

npm run build

Usage

The canvas-snowstorm module exports a single constructor snow, which takes the following arguments:

  • speed: <number> default=1 - The velocity at which the flakes fall
  • scale: <number> default=1 - The scale of the flakes in px
  • amount: <number> default=100 - The amount of flakes to be generated
  • color: <string> default="white" - The color of the flakes (a value of "random" will make every flake a different color)
  • fps: <number> default=30 - The frame rate of the animation
  • w: <number> default=window.innerWidth - The width of the canvas to be generated
  • h: <number> default=window.innerHeight - The height of the canvas to be generated
  • el: <HTMLElement> default=document.body - The parent element the canvas is to be injected into

Note: Increasing the amount and/or fps factors can be taxing on the CPU/GPU and result in jittery animation

Methods

  • start() : injects canvas into parent and begins animation
  • play() : un-pauses animation
  • pause() : pauses animation
  • changeScale(s) : updates scale of flakes (must be positive number)

Example

HTML

<div id="myContainer"></div>

CSS

#myContainer {
  background-color: black;
  width: 800px;
  height: 600px;
}

JavaScript

import Snow from "canvas-snowstorm";

const parentDiv = document.getElementById("myContainer");

const snow = new Snow(1, 1, 100, "white", 60, 800, 600, parentDiv);

Output

example 1