magic-snowflakes

v7.0.1

Published

2 months ago

Falling snowflakes

Downloads

16,475

❄️☃️🎄 Falling snowflakes

Details

Only one JavaScript file
CSS Animation
Rubber design
Flexible settings

Examples

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

See details

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 [email protected]:hcodes/snowflakes.git ./snowflakes
cd ./snowflakes

npm i
npm run build
npm test

open ./examples/

License

MIT License