What is it?
It is a "Moon Sugar", library for snowfall on your website.
Where I can see demo?
You can see demo in here.
How work with this?
To initialize "Moon Sugar" you need add this library to your project:
//old school//new school//TODO: make a normal import;Add element for snowflakes in your HTML
Title And run this:
moonSugar;You also need to add styles:
.moonSugar { overflow: hidden; position: absolute; left: 0; top: 0; pointer-events: none;}.moonSugar-item { position: absolute; left: 0; top: 0; will-change: transform; width: 14px; height: 14px; background: url("path-to-image") center center/14px 14px no-repeat;}What options can I use?
You can use in init-method next options:
- element
Root element. It's may be Element (example: document.querySelector(".moonSugar")) or String (example: ".moonSugar").
Default: document.querySelector(".moonSugar")
- classNameSnowflow
Class name for snowflake. String (example: "moonSugar-item")
Default: "moonSugar-item"
- countFlakesInSecons
How many to generate snowflakes per second. Number (example: 10). Attention: a large number can cause performance problems.
Default: 5
- countFlakeTypes
How many to generate types of snowflakes. Number (example: 5).
Default: 1
In this case you can set different types of snowflakes:
.moonSugar-item[data-type="0"] { background-image: url("path-to-image-0");}.moonSugar-item[data-type="1"] { background-image: url("path-to-image-1");}.moonSugar-item[data-type="2"] { background-image: url("path-to-image-2");}.moonSugar-item[data-type="3"] { background-image: url("path-to-image-3");}.moonSugar-item[data-type="4"] { background-image: url("path-to-image-4");}Where I can get images for snow?
For example, you can get it from this.
Or you can install npm package
npm install moon-sugar
Thankfulness
Many thanks @inflashwetrust for the mathematical logic of flying snowflakes and help in professional development.