0.3.0 • Published 7 months ago
canvas-snowstorm v0.3.0
☃ 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);
Output
0.3.0
7 months ago
0.2.1
7 months ago
0.2.2
7 months ago
0.2.0
3 years ago
0.1.27
3 years ago
0.1.26
4 years ago
0.1.25
4 years ago
0.1.24
4 years ago
0.1.22
4 years ago
0.1.21
4 years ago
0.1.20
4 years ago
0.1.18
4 years ago
0.1.19
4 years ago
0.1.16
4 years ago
0.1.17
4 years ago
0.1.15
4 years ago
0.1.10
4 years ago
0.1.11
4 years ago
0.1.12
4 years ago
0.1.13
4 years ago
0.1.8
4 years ago
0.1.7
4 years ago
0.1.9
4 years ago
0.1.4
4 years ago
0.1.6
4 years ago
0.1.5
4 years ago
0.1.3
4 years ago
0.1.2
4 years ago
0.1.1
4 years ago
0.1.0
4 years ago