<div id="tsparticles"></div>
<div id="instances">tsParticles Instances: <span></span><button type="button">Refresh!</button></div>
#instances {
position: fixed;
left: 30px;
top: 30px;
background: #fff;
color: #000;
padding: 5px;
font-family: Verdana;
}
const updateInstances = () => {
document.querySelector("#instances span").innerText = `${
tsParticles.dom().length
}`;
};
const refreshParticles = () => {
tsParticles.load("tsparticles", {
background: {
color: "#000"
},
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" },
move: {
bounce: false,
direction: "none",
enable: true,
outModes: "out",
random: false,
speed: 2,
straight: false
},
number: { density: { enable: true, area: 800 }, value: 200 },
opacity: {
value: 0.5
},
links: {
enable: true
},
size: {
value: 1
}
}
});
updateInstances();
};
refreshParticles();
document
.querySelector("#instances button")
.addEventListener("click", refreshParticles);
This Pen doesn't use any external CSS resources.