<div id="particles-js"></div>
<div id="instances">pJS Instances: <span></span><button type="button">Refresh!</button></div>
#particles-js {
position: fixed;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
top: 0;
left: 0;
background: #000;
z-index: -1;
}
#instances {
position: fixed;
left: 30px;
top: 30px;
background: #fff;
color: #000;
padding: 5px;
font-family: Verdana;
}
const updateInstances = () => {
document.querySelector("#instances span").innerText = `${pJSDom.length}`;
};
const refreshParticles = () => {
particlesJS("particles-js", {
interactivity: {
detect_on: "window"
},
particles: {
number: {
value: 200
},
move: {
speed: 6
},
size: {
value: 1
}
}
});
updateInstances();
};
refreshParticles();
document
.querySelector("#instances button")
.addEventListener("click", refreshParticles);
console.log(pJSDom[0]);
This Pen doesn't use any external CSS resources.