@tsparticles/jquery

Official tsParticles jQuery plugin

Installation

$ npm install @tsparticles/jquery

or

$ yarn add @tsparticles/jquery

or from jsDelivr

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

How to use

HTML

<divid="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(asyncfunction(){awaitloadFull(tsParticles);$("#tsparticles").particles().init({background: {color: {value: "#0d47a1",},},fpsLimit: 120,interactivity: {events: {onClick: {enable: true,mode: "push",},onHover: {enable: true,mode: "repulse",},},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,},move: {direction: "none",enable: true,outModes: {default: "bounce",},random: false,speed: 6,straight: false,},number: {density: {enable: true,},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