Nerfed Poet Melancholia

    magic-snowflakes
    TypeScript icon, indicating that this package has built-in type declarations

    6.1.0 • Public • Published

    ❄️ Falling snowflakes

    NPM version NPM Downloads Bundlephobia install size magic-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>

    or

    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 git@github.com:hcodes/snowflakes.git ./snowflakes
    cd ./snowflakes
    
    npm i
    npm run build
    npm test
    
    open ./examples/
    

    License

    MIT License

    Install

    npm i magic-snowflakes

    DownloadsWeekly Downloads

    3,548

    Version

    6.1.0

    License

    MIT

    Unpacked Size

    150 kB

    Total Files

    15

    Last publish

    Collaborators

    • hcodes