magic-snowflakes-valentine

v6.3.1

Published

10 months ago

Falling snowflakes(heart)

Downloads

0High
0Medium
0Low

jeki1992

snow snowflakes snowflake flake newyear christmas falling

❄️☃️🎄 Falling snowflakes

Details

Only one JavaScript file
CSS Animation
Rubber design
Flexible settings

Examples

See details

Using

npm i magic-snowflakes --save-dev

Without settings

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

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

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>

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 | | |ES6 |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