tsParticles - v0.0.0
    Preparing search index...

    Module tsParticles Particles.js integration - v4.0.0-alpha.8

    banner

    tsParticles Particles.js Compatibility Package

    jsDelivr npmjs npmjs GitHub Sponsors

    tsParticles particles.js compatibility library.

    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

    Including the tsparticles.pjs.bundle.min.js file will also include the tsParticles engine exports. You need to call initPjs function awaiting it like in the samples, after that the particlesJS instance, or the Particles object are ready to be used in the same way.

    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.

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

    (async (engine) => {
      await initPjs(engine);

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

    Here you can use ParticlesJS options.

    (async (engine) => {
      initPjs(engine);

      Particles.init({
        /* options */
      });
    })(tsParticles);
    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
    Option Type Default Description
    breakpoint integer - Required: Breakpoint in px
    options object - Required: Options object, that overrides default values
    Method Description
    pauseAnimation Pauses/stops the particle animation
    resumeAnimation Continues the particle animation
    destroy Destroys the plugin

    Modules

    bundle
    index
    marcbruederlin/Particles
    VincentGarreau/IParticlesJS
    VincentGarreau/particles

    Settings

    Member Visibility

    On This Page

    tsParticles Particles.js Compatibility Package
    Modules