Snow falling slowly on a winter night. Probably the most calming and peaceful snowfall effect written in pure JS/CSS.
npm install pure-snow.jsA 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.
To install via npm, run the following command in your terminal:
``bash`
npm install pure-snow.js
To use the script via a script tag, include the following in head of your HTML file:
`html`
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`
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`
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 = 200Page
height:200vh ---> count = 300`This project is licensed under the MIT License. See the LICENSE file for more details.