moon-sugar

v1.0.1

Published

2 years ago

Snowfall for your site

Downloads

0High
0Medium
0Low

hawkeyepierce89

snow snowflakes snowfall

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
<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;
}

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.

Published

Vulnerabilities

Links

Maintainers

Keywords