magic-heartflakes

    4.1.5 • Public • Published

    ❄️ Falling snowflakes

    NPM version NPM Downloads Dependency Status Build Status Bundlephobia

    Details

    • Only one JavaScript file (8 KB, GZIP)
    • CSS Animation
    • Rubber design
    • Flexible settings

    Examples

    See details

    Using

    npm i magic-snowflakes --save-dev
    

    or

    yarn add magic-snowflakes
    

    Without settings

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

    or

    'use strict';
     
    const Snowflakes = require('magic-snowflakes');
    Snowflakes();

    Advanced settings

    <html>
    <body>
        <div id="snowflakes-container" style="width: 1000px; height: 500px;"></div>
        <script src="https://unpkg.com/magic-snowflakes/dist/snowflakes.min.js"></script> 
        <script>
            var sf = 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: 8
                maxSize: 50, // Default: 18
                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
            });
        </script> 
    </body>
    </html>

    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
    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 ./dev-examples/
    

    License

    MIT License

    Install

    npm i magic-heartflakes

    DownloadsWeekly Downloads

    3

    Version

    4.1.5

    License

    MIT

    Unpacked Size

    61.7 kB

    Total Files

    8

    Last publish

    Collaborators

    • jackson-elfers