☃ canvas-snowstorm ☃
A dynamically generated HTML Canvas snow animation, written in TypeScript.
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 inpx
-
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);