It is a "Moon Sugar", library for snowfall on your website.
You can see demo in here.
To initialize "Moon Sugar" you need add this library to your project:
//old school
<script src="moon-sugar.min.js"></script>//new school
//TODO: make a normal import
import * as moonSugar from 'moon-sugar';Add element for snowflakes in your HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="moonSugar"></div>
</body>
</html>And run this:
moonSugar.init();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;
}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");
}For example, you can get it from this.
Yes
npm install moon-sugar
Many thanks @inflashwetrust for the mathematical logic of flying snowflakes and help in professional development.