Module tsParticles Particles.js integration - v3.7.0

tsParticles Particles.js Compatibility Package

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

bundle index marcbruederlin/Particles VincentGarreau/IParticlesJS VincentGarreau/particles