pure-snow.js

A simple JavaScript package that generates snowflakes and corresponding CSS to make them fall on your webpage.

Written in pure JS/CSS. (No SCSS).

Inspired by: alphardex (SCSS Version) and YusukeNakaya (Vue implementation).

pure-snow.js was created for those who don't want to install any additional libraries and want to easily change parameters. \
If you only need the effect I can also recommend downloading compiled version of alphardex's work.
It should be render slightly faster.

Installation

$3

To install via npm, run the following command in your terminal:

``bash
npm install pure-snow.js
`

$3

To use the script via a script tag, include the following in head of your HTML file:

`html


`

Usage

In case you used npm to install the package, generate snowflakes with generateSnow function.

`js
// import "pure-snow.js/style.css"; // Remember to import style.css
import { createSnow, showSnow } from "pure-snow.js";

generateSnow(); // creates snowflakes and generate css for them
showSnow(true); // snow can be disabled using showSnow function
`

NOTE: When used via a script tag, generateSnow will run automatically after document has been loaded.

Create snow element.

`html



`

$3

Default amount of snowflakes is set to 200. This might be challenging for an older GPU. \
You can change that by adding attribute count to snow div eg:
`html



`

$3

It is also possible to get rid of style.css file. Just paste it's content to declaration of const BASE_CSS in script above pure-snow.js file eg:

`html


`

Example

Here is a full example of how you might use the pure-snow.js in a webpage:

`html















`

Caveats

$3

Keep in mind that increasing page height might impact performance.
While increasing page height snowflake count should also be increased.

For example:

Page height:100vh ---> count = 200

Page height:200vh ---> count = 300`

Demo:

https://hyperstown.github.io/puresnowjs/

License

This project is licensed under the MIT License. See the LICENSE file for more details.