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 |