canvas-snowstorm
v0.3.0
Published
A dynamically generated HTML Canvas snow animation, written in TypeScript. ☃
Downloads
13
Maintainers
Readme
☃ 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 fallscale: <number> default=1
- The scale of the flakes inpx
amount: <number> default=100
- The amount of flakes to be generatedcolor: <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 animationw: <number> default=window.innerWidth
- The width of the canvas to be generatedh: <number> default=window.innerHeight
- The height of the canvas to be generatedel: <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 animationplay()
: un-pauses animationpause()
: pauses animationchangeScale(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);