A Vue Component For Dropping Confetti Animation Effect

Confetti is a Vue component of the confetti falling animation drop in pure JavaScript.

confetti video transparent background free, confetti explosion animation css, confetti animation javascript, confetti effect download, how to add confetti in html

How to make use of it:

Install and download:

# NPM
$ npm install vue-confetti --save

Import the component.

import Vue from 'vue'
import VueConfetti from 'vue-confetti'

Use this component.

<template>
  <main>
    <button @click="start">Start</button>
    <button @click="stop">Stop</button>
  </main>
</template>

Vue.use(VueConfetti)

export default {
  methods: {
    start () {
      this.$confetti.start()
    },

    stop () {
      this.$confetti.stop()
    }
  }
}

Property	Type	Description	Default
particles	Array	The settings for each particle type (see below).	10
defaultType	String	The default particle type.	‘circle’
defaultSize	Number	The default size of all particles (should be a positive number).	10
defaultDropRate	Number	The default speed at which the particles fall.	10
defaultColors	Array	The default particle colors.	[‘DodgerBlue’, ‘OliveDrab’, ‘Gold’, ‘pink’, ‘SlateBlue’, ‘lightblue’, ‘Violet’, ‘PaleGreen’, ‘SteelBlue’, ‘SandyBrown’, ‘Chocolate’, ‘Crimson’]
canvasId	String	The ID for a custom canvas element (the default is to append a canvas to the `<body>` element).	null
canvasElement	HTMLCanvasElement	A custom canvas element (the default is to append a canvas to the `<body>` element).	null
particlesPerFrame	Number	The number of particles to drop per animation frame.	2
windSpeedMax	Number	The maximum wind speed (disabling the wind by setting to 0 can be useful for slower drop rates).	1

The following options can be passed to each item in particles:

Property	Type	Description	Default
type	String	The type of particle (`'circle'`, `'rect'`, `'heart'` or `'image'`).	‘circle’
size	Number	The size of the particles (should be a positive number).	10
dropRate	Number	The speed at which the particles fall.	10
colors	Array	The particle colors.	[‘DodgerBlue’, ‘OliveDrab’, ‘Gold’, ‘pink’, ‘SlateBlue’, ‘lightblue’, ‘Violet’, ‘PaleGreen’, ‘SteelBlue’, ‘SandyBrown’, ‘Chocolate’, ‘Crimson’]
url	String	The path to a custom image or SVG to use as the particle. Note that `type` must be set to `image`.	null