Press "Enter" to skip to content

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()
    }
  }
}
PropertyTypeDescriptionDefault
particlesArrayThe settings for each particle type (see below).10
defaultTypeStringThe default particle type.‘circle’
defaultSizeNumberThe default size of all particles (should be a positive number).10
defaultDropRateNumberThe default speed at which the particles fall.10
defaultColorsArrayThe default particle colors.[‘DodgerBlue’, ‘OliveDrab’, ‘Gold’, ‘pink’, ‘SlateBlue’, ‘lightblue’, ‘Violet’, ‘PaleGreen’, ‘SteelBlue’, ‘SandyBrown’, ‘Chocolate’, ‘Crimson’]
canvasIdStringThe ID for a custom canvas element (the default is to append a canvas to the <body> element).null
canvasElementHTMLCanvasElementA custom canvas element (the default is to append a canvas to the <body> element).null
particlesPerFrameNumberThe number of particles to drop per animation frame.2
windSpeedMaxNumberThe 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:

PropertyTypeDescriptionDefault
typeStringThe type of particle ('circle''rect''heart' or 'image').‘circle’
sizeNumberThe size of the particles (should be a positive number).10
dropRateNumberThe speed at which the particles fall.10
colorsArrayThe particle colors.[‘DodgerBlue’, ‘OliveDrab’, ‘Gold’, ‘pink’, ‘SlateBlue’, ‘lightblue’, ‘Violet’, ‘PaleGreen’, ‘SteelBlue’, ‘SandyBrown’, ‘Chocolate’, ‘Crimson’]
urlStringThe path to a custom image or SVG to use as the particle. Note that type must be set to image.null

Confetti Animation Effect, vue-confetti Plugin/Github


See Demo And Download

Official Website(alexandermendes): Click Here

This superior jQuery/javascript plugin is developed by alexandermendes. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.