❄️☃️🎄 Falling snowflakes

Details

Only one JavaScript file
CSS Animation
Rubber design
Flexible settings

Examples

🔍 Constructor: change settings and copy code for your site
🎲 3D Cube
❄ Simple
🎨 Multicolor
🐘 Big
🍋 Blend mode
🪟 Layer
🏠 Some layers
💛 Own kind
🗻Own z-index

Using

npm i magic-snowflakes --save-dev

Without settings

Paste anywhere in your page's HTML:

<script src="https://unpkg.com/magic-snowflakes/dist/snowflakes.auto.min.js"></script>

With settings

<html>
<body>
    ...
    <script src="https://unpkg.com/magic-snowflakes/dist/snowflakes.min.js"></script>
    <script>
        new Snowflakes({
            wind: false,
            rotation: false
        });
    </script>
</body>
</html>

Advanced settings

<html>
<head>
<style>
    #snowflakes-container {
        width: 500px;
        height: 500px;
        position: relative;
        overflow: hidden;
    }
</style>
</head>
<body>
    <div id="snowflakes-container"></div>
    <script src="https://unpkg.com/magic-snowflakes/dist/snowflakes.min.js"></script>
    <script>
        var snowflakes = new Snowflakes({
            color: '#f00', // Default: "#5ECDEF"
            container: document.querySelector('#snowflakes-container'), // Default: document.body
            count: 100, // 100 snowflakes. Default: 50
            minOpacity: 0.1, // From 0 to 1. Default: 0.6
            maxOpacity: 0.95, // From 0 to 1. Default: 1
            minSize: 20, // Default: 10
            maxSize: 50, // Default: 25
            rotation: true, // Default: true
            speed: 2, // The property affects the speed of falling. Default: 1
            wind: false, // Without wind. Default: true
            width: 500, // Default: width of container
            height: 250, // Default: height of container
            zIndex: 100, // Default: 9999,
            autoResize: true // Default: true
        });
    </script>
</body>
</html>

Typescript or ES6

import Snowflakes from 'magic-snowflakes';
const snowflakes = new Snowflakes();
// ...
snowflakes.stop();
// ...
snowflakes.start();
// ...
snowflakes.destroy();

API

import Snowflakes from 'magic-snowflakes';
const snowflakes = new Snowflakes();

.start()

Start CSS Animation.

.stop()

Stop CSS Animation.

.show()

Show snowflakes.

.hide()

Hide snowflakes.

.resize()

Resize snowflakes.

.destroy()

Destroy the instance of snowflakes.

Different Builds

In the dist/ directory of the NPM package you will find many different builds of snowflakes.js.

Type	Filename	Description
Full (UMD)	`snowflakes.js`
Full (UMD, production)	`snowflakes.min.js`
Full auto	`snowflakes.auto.js`	Without API
Full auto (production)	`snowflakes.auto.min.js`	Without API
ES6 or Typescript	`snowflakes.esm.js`
Light (UMD)	`snowflakes.light.js`	Without SVG images
Light (UMD, production)	`snowflakes.light.min.js`	Without SVG images

Development

git clone git@github.com:hcodes/snowflakes.git ./snowflakes
cd ./snowflakes

npm i
npm run build
npm test

open ./examples/

License

MIT License

hcodes / snowflakes

readme