Skip to content

Latest commit

 

History

History
159 lines (134 loc) · 4.65 KB

README.md

File metadata and controls

159 lines (134 loc) · 4.65 KB
Raw

❄️☃️🎄 Falling snowflakes

NPM version NPM Downloads install size

Details

  • Only one JavaScript file
  • CSS Animation
  • Rubber design
  • Flexible settings

Examples

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