Package Exports

jquery-particles
jquery-particles/dist/jquery.particles.min.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (jquery-particles) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

jquery-particles

Official tsParticles jQuery plugin

Installation

$ npm install jquery-particles

$ yarn add jquery-particles

or from jsDelivr

<!-- first include tsParticles engine -->
<script src="https://cdn.jsdelivr.net/npm/tsparticles-engine"></script>

<!-- then include any tsParticles plugin needed -->
<script src="https://cdn.jsdelivr.net/npm/tsparticles/tsparticles.bundle.min.js"></script>

<!-- then include jquery wrapper -->
<script src="https://cdn.jsdelivr.net/npm/jquery-particles"></script>

How to use

HTML

<div id="tsparticles"></div>

// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
// starting from v2 you can add only the features you need reducing the bundle size
$(document).ready(async function () {
  await loadFull(tsParticles);

  $("#tsparticles")
    .particles()
    .init(
      {
        background: {
          color: {
            value: "#0d47a1",
          },
        },
        fpsLimit: 120,
        interactivity: {
          events: {
            onClick: {
              enable: true,
              mode: "push",
            },
            onHover: {
              enable: true,
              mode: "repulse",
            },
            resize: true,
          },
          modes: {
            push: {
              quantity: 4,
            },
            repulse: {
              distance: 200,
              duration: 0.4,
            },
          },
        },
        particles: {
          color: {
            value: "#ffffff",
          },
          links: {
            color: "#ffffff",
            distance: 150,
            enable: true,
            opacity: 0.5,
            width: 1,
          },
          collisions: {
            enable: true,
          },
          move: {
            direction: "none",
            enable: true,
            outModes: {
              default: "bounce",
            },
            random: false,
            speed: 6,
            straight: false,
          },
          number: {
            density: {
              enable: true,
              area: 800,
            },
            value: 80,
          },
          opacity: {
            value: 0.5,
          },
          shape: {
            type: "circle",
          },
          size: {
            value: { min: 1, max: 5 },
          },
        },
        detectRetina: true,
      },
      function (container) {
        // container is the particles container where you can play/pause or stop/start.
        // the container is already started, you don't need to start it manually.
      }
    );

  // or

  $("#tsparticles")
    .particles()
    .ajax("particles.json", function (container) {
      // container is the particles container where you can play/pause or stop/start.
      // the container is already started, you don't need to start it manually.
    });
});

Demos

The demo website is here

https://particles.js.org

There's also a CodePen collection actively maintained and updated here

https://codepen.io/collection/DPOage