Skip to content
Snowflakes in JavaScript
JavaScript CSS
Branch: master
Clone or download
Latest commit 571d06a Jul 6, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples v4 Dec 31, 2017
images CSS optimization Dec 16, 2017
src Fix Safari scroll bug Jan 26, 2019
.babelrc Update dev deps Oct 12, 2018
.eslintignore
.eslintrc v2.1.0 Dec 17, 2017
.gitattributes Added Rollup with Babel Dec 17, 2017
.gitignore v3.1.0 Dec 27, 2017
.travis.yml Added Rollup with Babel Dec 17, 2017
CHANGELOG.md v4.1.2 Jun 8, 2019
LICENSE Add LICENSE Nov 12, 2017
README.md v4 Dec 31, 2017
gulpfile.js
package-lock.json Update dev deps Jul 6, 2019
package.json

README.md

Falling snowflakes

NPM version NPM Downloads Dependency Status Build Status

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="./node_modules/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="./node_modules/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 snowflakes.js
Full (production) snowflakes.min.js
Light snowflakes.light.js Without SVG images
Light (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

You can’t perform that action at this time.