Module tsParticles Particles.js integration - v3.3.0

banner

tsParticles Particles.js Compatibility Package

jsDelivr npmjs npmjs GitHub Sponsors

tsParticles particles.js compatibility library.

How to use it

CDN / Vanilla JS / jQuery

The CDN/Vanilla version JS has two different files:

  • One is a bundle file with all the scripts included in a single file
  • One is a file including just the initPjs function to load the tsParticles/particles.js compatibility

Bundle

Including the tsparticles.pjs.bundle.min.js file will work exactly like v1, you can start using the tsParticles, the particlesJS instance, or the Particles object in the same way.

Not Bundle

This installation requires more work since all dependencies must be included in the page. Some lines above are all specified in the Included Packages section.

Usage

Once the scripts are loaded you can set up tsParticles or particlesJS like this:

const { particlesJS } = initPjs(tsParticles); // not needed if using the bundle script, required for any other installation

particlesJS("tsparticles", {
/* options */
});

// or

tsParticles.load({
id: "tsparticles",
options: {
/* options */
},
});

Options

Here you can use ParticlesJS or tsParticles options, they will work both fine.

Alternative Usage

const { Particles } = initPjs(tsParticles); // not needed if using the bundle script, required for any other installation

Particles.init({
/* options */
});

Particles Options (only for Particles.init)

Option Type Default Description
selector string - Required: The CSS selector of your canvas element
maxParticles integer 100 Optional: Maximum amount of particles
sizeVariations integer 3 Optional: Amount of size variations
speed integer 0.5 Optional: Movement speed of the particles
color string or string[] #000000 Optional: Color(s) of the particles and connecting lines
minDistance integer 120 Optional: Distance in px for connecting lines
connectParticles boolean false Optional: true/false if connecting lines should be drawn or not
responsive array null Optional: Array of objects containing breakpoints and options
Responsive Options
Option Type Default Description
breakpoint integer - Required: Breakpoint in px
options object - Required: Options object, that overrides default values

Methods

Method Description
pauseAnimation Pauses/stops the particle animation
resumeAnimation Continues the particle animation
destroy Destroys the plugin

Index

Modules