An Interest In:
Web News this Week
- March 21, 2024
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
JavaScript - How to create beautiful fireworks effects with tsParticles
Fireworks preset
Starting from v2.2.0 the tsParticles fireworks preset has a new configuration, for a more realistic effect.
A demo can be seen here
Try the preview at 0.5x if the particles are going outside of the canvas, it's better to see it on CodePen.
How to use the fireworks preset
Vanilla JavaScript
There are two ways for installing the fireworks presets, as you can see in the readme of the package, but I'll describe the easier one.
<script src="https://cdn.jsdelivr.net/npm/tsparticles-preset-fireworks@2/tsparticles.preset.fireworks.bundle.min.js"></script>
After that just add this JavaScript code for loading it and start the effect
(async () => { await tsParticles.load("tsparticles", { preset: "fireworks", });})();
React.js
For React.js you have to install these packages:
npm install react-particles tsparticles-preset-fireworks
or
yarn add react-particles tsparticles-preset-fireworks
And the script can be loaded like this:
import Particles from "react-particles";import { loadFireworksPreset } from "tsparticles-preset-fireworks";function fireworks(props) { // this customizes the component tsParticles installation const customInit = async (engine) => { // this adds the preset to tsParticles, you can safely use the await loadFireworksPreset(engine); }; const options = { preset: "fireworks" }; return <Particles options={options} init={customInit} />;}export default fireworks;
Preact / Inferno
There are also packages for Preact and Inferno, just replace react
with preact
or inferno
in the package name and usage.
Vue.js (2.x and 3.x)
Since Vue.js 2.x and 3.x packages have different instructions, before I'll show the code needed
<Particles id="tsparticles" :particlesInit="particlesInit" :options="particlesOptions" />
const particlesOptions = { preset: "fireworks",};async function particlesInit(engine: Engine): Promise<void> { await loadFireworksPreset(engine);}
Vue 2.x
For Vue.js 2.x you have to install these packages:
npm install vue2-particles tsparticles-preset-fireworks
or
yarn add vue2-particles tsparticles-preset-fireworks
and in the app.js
import Particles from "vue2-particles";Vue.use(Particles);
Vue 3.x
For Vue.js 3.x you have to install these packages:
npm install vue3-particles tsparticles-preset-fireworks
or
yarn add vue3-particles tsparticles-preset-fireworks
and in the app.js
import Particles from "vue3-particles";createApp(App).use(Particles)
Angular
For Angular you have to install these packages:
npm install ng-particles tsparticles-engine tsparticles-preset-fireworks
or
yarn add ng-particles tsparticles-engine tsparticles-preset-fireworks
And add this tag to the HTML file
<ng-particles [id]="id" [options]="particlesOptions" [particlesInit]="particlesInit"></ng-particles>
and in the relative TypeScript file this code
import { loadFireworksPreset } from "tsparticles-preset-fireworks"; // top of file, with other importsconst particlesOptions = { preset: "fireworks",};async function particlesInit(engine: Engine): Promise<void> { await loadFireworksPreset(engine);}
and in the app module file add this import and usage
import { NgParticlesModule } from "ng-particles"; // top of the file, with other imports@NgModule({ declarations: [ /* AppComponent */ ], imports: [ /* other imports */ NgParticlesModule /* NgParticlesModule is required*/ ], providers: [], bootstrap: [ /* AppComponent */ ]})export class AppModule {}
Svelte
The tag to add to the HTML
<Particles id="tsparticles" options={particlesOptions} particlesInit={particlesInit}/>
and the properties in the JavaScript code
import Particles from "svelte-particles";import { loadFireworksPreset } from "tsparticles-preset-fireworks";let particlesOptions = { preset: "fireworks",};let particlesInit = async (engine) => { await loadFireworksPreset(engine);};
Other UI frameworks
Packages are available also for: Riot.js, Solid, Web Components and jQuery. You can find more setup instructions here
Social contacts
For any other information or help here are our official social channels
Or you can open an issue or a discussion on GitHub
matteobruni / tsparticles
tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.
tsParticles - TypeScript Particles
A lightweight TypeScript library for creating particles. Dependency free (*), browser ready and compatible withReact.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.js, Solid.js, and Web Components
Table of Contents
This readme refers to upcoming v2version, read here for v1 documentation
- Use for your website
- Official components for some of the most used frameworks
- Presets
- Templates and Resources
- Demo / Generator
- Video Tutorials
- Migrating from Particles.js
- Plugins/Customizations
- Dependency Graphs
- Sponsors
Do you want to use it on your website?
Documentation and Development references here
This library is
Original Link: https://dev.to/tsparticles/javascript-create-beautiful-fireworks-effects-with-tsparticles-1ali
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To