Snowflakes Save
❄️ Falling snowflakes
Project README
❄️☃️🎄 Falling snowflakes
Details
- Only one JavaScript file
- CSS Animation
- Rubber design
- Flexible settings
Examples
- 🔍 Demo
- ❄ Simple
- 🎨 Multicolor
- 🐘 Big
- 🚀 Increased speed
- 🪟 Layer
- 🏠 Some layers
- 🔴 Own color
- 💛 Own kind
- 🗻Own z-index
- ⏸ start() and stop()
- 🌬 Without wind
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 [email protected]:hcodes/snowflakes.git ./snowflakes
cd ./snowflakes
npm i
npm run build
npm test
open ./examples/
License
MIT License
Open Source Agenda is not affiliated with "Snowflakes" Project. README Source: hcodes/snowflakes
Stars
350
Open Issues
5
Last Commit
2 months ago
Repository
License
Open Source Agenda Badge
