Skip to content

HawkeyePierce89/Moon-Sugar

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

What is it?

It is a "Moon Sugar", library for snowfall on your website.

Where can I see demo?

You can see demo in here.

How to 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 can I get images for snow?

For example, you can get it from this.

Can I install this from npm?

Yes

npm install moon-sugar

Thankfulness

Many thanks @inflashwetrust for the mathematical logic of flying snowflakes and help in professional development.

About

Snowfall on your website πŸŽ„

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published