Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ubaldop/vue-niege
Vue component to add a snowfall on your page
https://github.com/ubaldop/vue-niege
canvas component single-file snow snowfall vuejs vuejs-components
Last synced: 17 days ago
JSON representation
Vue component to add a snowfall on your page
- Host: GitHub
- URL: https://github.com/ubaldop/vue-niege
- Owner: ubaldop
- Created: 2018-11-24T16:00:28.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2018-12-12T18:22:27.000Z (almost 6 years ago)
- Last Synced: 2024-05-29T03:12:26.914Z (6 months ago)
- Topics: canvas, component, single-file, snow, snowfall, vuejs, vuejs-components
- Language: JavaScript
- Homepage:
- Size: 845 KB
- Stars: 31
- Watchers: 1
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-niege
_Let it snow on your Vue applications!_
---
Single File Vue Component for _lazy_ snow storms generation. Come on, let's make your Vue applications joyful for Christmas time! 🎄 🎅
### Installation
You can install this component using npm:
```bash
npm install --save vue-niege
```
### Usage
Once installed, it is easy to use it.
##### Importing the component
First, you need to import `vue-niege` in your files. You can do that in different ways.
For example, it can be imported into a build process for use in full-fledged Vue applications:
```js
import Snow from 'vue-niege';
export default {
components: {
Snow,
},
// rest of the component
}
```
Alternatively, you can import `vue-niege` via `` tag in the browser directly:
```html
<script src="https://unpkg.com/vue">
```
##### Using the component
Once imported, you can use your component as follows:
```js
```
This is the minimal setup to add a snowing canvas in your application.
### Properties
If you need to customize the snow behavior, you can use one of the following optional properties.
| **Properties** | **Default** | **Description** | **Type** |
|----------------|-------------|----------------------------------------------------------------------------------------|------------------|
| **active** | `true` | _provides dynamic display to the canvas: it is displayed only where this prop is true_ | Boolean |
| **color** | `#FFFFFF` | _given a master HEX color, it defines a color pattern of four values for the snow. This property must be in expressed as HEX color (e.g.: `#050484`)_ | String |
| **zIndex** | `1` | _defines the z-index position of the canvas in the DOM._ | Number |
| **swing** | `0` | _applies a swing effect to each snowflake. By default no swinging is applied._ | Number |
| **wind** | `1` | _defines the horizontal wind effect. The effect blows from right for values greater than 0, from left for values less than 0._ | Number |
| **speed** | `m` | _defines the speed of the falling snow. The available values are `h` for high speed, `m` for medium speed, `l` for low speed._ | String |
For example, the following:
```js
```
produces the following effect:
### Contributing
This component can be improved both in features and performances. Please, help me in doing it better 🎅
### Credits
The inspiration for the component comes from [this](https://github.com/HermannBjorgvin/SnowJs) and [this](https://github.com/Fuxy526/vue-snowf), so their authors deserve big kudos.
The inspiration for the component name comes from the above impressionist painting by [Gustave Caillebotte](https://en.wikipedia.org/wiki/Gustave_Caillebotte), titled **Vue de toits (Effet de neige)**.