❤
npm
Sign UpSign In

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

Readme

Keywords

Package Sidebar

Install

npm i magic-heartflakes

Repository

github.com/hcodes/snowflakes

Homepage

github.com/hcodes/snowflakes

Weekly Downloads

3

Version

4.1.5

License

MIT

Unpacked Size

61.7 kB

Total Files

8

Last publish

Collaborators

  • jackson-elfers
Try on RunKit
Report malware