6

[Vue.js] How to create beautiful and realistic confetti animations using tsParti...

 3 years ago
source link: https://dev.to/matteobruni/how-to-create-beautiful-and-realistic-confetti-animations-in-vue-js-using-tsparticles-c5h
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
Cover image for [Vue.js] How to create beautiful and realistic confetti animations using tsParticles

[Vue.js] How to create beautiful and realistic confetti animations using tsParticles

Jun 29

・1 min read

confetti130 (3 Part Series)

I wrote a post about tsParticles and the new confetti animation created in the 1.30 version.

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);
Enter fullscreen modeExit fullscreen mode

home.vue

<!-- this component can be placed anywhere -->
<Particles :options="/* paste options here, remember to replace double quotes with single quotes */" />
Enter fullscreen modeExit fullscreen mode

A working sample can be found below

GitHub logo 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…


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK