0.0.2 • Published 8 years ago

vue-snowf v0.0.2

Weekly downloads
361
License
MIT
Repository
github
Last release
8 years ago

vue-snowf

Snowfall component for Vue.js -- Let it snow on your page! ❄

npm.io

Install

npm:

npm install vue-snowf --save

Usage

import Snowf from 'vue-snowf';

// Add Snowf to the components
export default {
  components: {
	  Snowf
  },
  ...
}

// Insert component in the template
<Snowf
  :amount="50"
  :size="5"
  :speed="1.5"
  :wind="0"
  :opacity="0.8"
  :swing="1"
  :image="null"
  :zIndex="null"
  :resize="true"
  color="#fff"
/>

Default Options

ArgumentTypeDefault ValueDescription
amountNumber50Number of snowflakes displayed at a time.
sizeNumber5Size of snowflakes.
speedNumber1.5Vertical speed of snowflakes. The larger, the snowflakes drop faster.
windNumber0Horizontal wind power. Wind will blow right if this is a positive number, and a negative number makes wind blow left.
colorString'#fff'Color of snowflakes. This option accepts HEX or RGB color code, such as "#fff", "#ffffff", "rgb(255,255,255)".
opacityNumber0.8The max opacity of snowflakes. The plugin will generate snowflakes with different opacity from 0 to this number.
swingNumber1Swing offset of snowflakes. If you don't want them to swing, set this option as 0.
imageStringnullSet this option to replace the snowflake with your image.
zIndexNumbernullPosition of the canvas layer. Set the layer front or back by changing this value.
resizeBooleantrueAdjust canvas size and snowflakes position automatically or not.

Others

snowf (use snowf with Vanilla JS)

react-snowf (use snowf with React)

Licence

vue-snowf is open source and released under the MIT Licence.

Copyright (c) 2017 Fuxy526