jquery-particles

2.0.0-alpha.5 • Public • Published

banner

jquery-particles

npm npm Mentioned in Awesome jQuery

Official tsParticles jQuery plugin

Installation

npm install jquery-particles

or from jsDelivr

jsDelivr

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

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

How to use

HTML

<div id="tsparticles"></div>
$("#tsparticles")
  .particles()
  .init(
    {
      background: {
        color: {
          value: "#0d47a1",
        },
      },
      fpsLimit: 60,
      interactivity: {
        detectsOn: "canvas",
        events: {
          onClick: {
            enable: true,
            mode: "push",
          },
          onHover: {
            enable: true,
            mode: "repulse",
          },
          resize: true,
        },
        modes: {
          bubble: {
            distance: 400,
            duration: 2,
            opacity: 0.8,
            size: 40,
          },
          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,
          outMode: "bounce",
          random: false,
          speed: 6,
          straight: false,
        },
        number: {
          density: {
            enable: true,
            value_area: 800,
          },
          value: 80,
        },
        opacity: {
          value: 0.5,
        },
        shape: {
          type: "circle",
        },
        size: {
          random: true,
          value: 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

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
2.9.312latest
2.0.43next
2.0.0-beta.42beta
2.0.0-alpha.72alpha

Version History

VersionDownloads (Last 7 Days)Published
2.9.312
2.9.23
2.9.13
2.9.03
2.8.028
2.7.13
2.7.04
2.6.03
2.5.33
2.5.23
2.5.12
2.5.03
2.4.03
2.3.33
2.3.23
2.3.13
2.3.03
2.2.43
2.2.33
2.2.22
2.2.13
2.2.03
2.1.43
2.1.33
2.1.22
2.1.13
2.1.02
2.0.63
2.0.53
2.0.43
2.0.32
2.0.23
2.0.12
2.0.02
2.0.0-beta.42
2.0.0-beta.32
2.0.0-beta.22
2.0.0-beta.12
2.0.0-alpha.72
2.0.0-alpha.62
2.0.0-alpha.53
2.0.0-alpha.43
2.0.0-alpha.32
2.0.0-alpha.22
2.0.0-alpha.13
2.0.0-alpha.02

Package Sidebar

Install

npm i jquery-particles@2.0.0-alpha.5

Version

2.0.0-alpha.5

License

MIT

Unpacked Size

6.03 MB

Total Files

12649

Last publish

Collaborators

  • ar3s
  • matteobruni