An Interest In:
Web News this Week
- March 28, 2024
- March 27, 2024
- March 26, 2024
- March 25, 2024
- March 24, 2024
- March 23, 2024
- March 22, 2024
[Vue.js] How to create beautiful and realistic confetti animations using tsParticles
I wrote a post about tsParticles and the new confetti animation created in the 1.30
version.
How to create beautiful and realistic confetti animation with tsParticles
Matteo Bruni Jun 29 6 min read
This configuration can be used as is in any Vue.js 2.x tsParticles installation (particles.vue
package).
app.js
import Particles from "particles.vue";Vue.use(Particles);
home.vue
<!-- this component can be placed anywhere --><Particles :options="/* paste options here, remember to replace double quotes with single quotes */" />
A working sample can be found below
matteobruni / tsparticles
tsParticles - Easily create highly customizable particles animations and use them as animated backgrounds for your website. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno.
tsParticles - TypeScript Particles
A lightweight TypeScript library for creating particles. Dependency free (*), browser ready and compatible with React, Vue, Angular, Svelte, jQuery, Preact, Inferno
Do you want to use it on your website?
This library is available on the two most popular CDNs and it's easy and ready to use, if you were using particles.js it's even easier.
You'll find the instructions below, with all the links you need, and don't be scared by TypeScript, it's just the source language.
The output files are just JavaScript.
CDNs and npm
have all the sources you need in Javascript, a bundle browser ready (tsparticles.min.js) and all files splitted for import
syntax.
If you are still interested some lines below there are some instructions for migrating from the old particles.js library.
Library installation
Hosting / CDN
Please use this hosts or your own to
Original Link: https://dev.to/matteobruni/how-to-create-beautiful-and-realistic-confetti-animations-in-vue-js-using-tsparticles-c5h
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To