pure-snow.js
v2.1.0
Published
Snow falling slowly on a winter night. Probably the most calming and peaceful snowfall effect written in pure JS/CSS.
Downloads
731
Maintainers
hyperstownReadme
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
npm
To install via npm, run the following command in your terminal:
npm install pure-snow.jsScript Tag
To use the script via a script tag, include the following in head of your HTML file:
<link rel="stylesheet" href="/path/to/style.css">
<script src="/path/to/pure-snow.js" defer></script>Usage
In case you used npm to install the package, generate snowflakes with generateSnow function.
// 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 functionNOTE: When used via a script tag, generateSnow will run automatically after document has been loaded.
Create snow element.
<div id="snow"></div>Controlling snowfall density:
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:
<div id="snow" data-count="200"></div>No CSS files whatsoever:
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:
<script>
const BASE_CSS = `
body {
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
overflow-x: hidden;
min-height: 100vh;
/* If you want to change the site height you can remove overflow-y */
/* pure-snow will automatically detect height of body tag */
overflow-y: hidden;
color: white;
}
.snowflake {
position: absolute;
width: 10px;
height: 10px;
background: white;
border-radius: 50%;
filter: drop-shadow(0 0 10px white);
}
`
</script>
<script src="/path/to/pure-snow.js" defer></script>Example
Here is a full example of how you might use the pure-snow.js in a webpage:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/path/to/style.css">
<script src="/path/to/pure-snow.js" defer></script>
<!-- Generated snowflake styles will be injected here -->
</head>
<body>
<div id="snow" data-count="200"></div>
<!-- Your content goes here -->
</body>
</html>Caveats
Page height:
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.