File size: 2,126 Bytes
72e7194 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
class ParticleBackground extends HTMLElement {
connectedCallback() {
this.initParticles();
}
initParticles() {
const script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js';
script.onload = () => {
particlesJS('particles-js', {
"particles": {
"number": { "value": 80, "density": { "enable": true, "value_area": 800 } },
"color": { "value": "#3B71FE" },
"shape": { "type": "circle" },
"opacity": {
"value": 0.5,
"random": false,
"anim": { "enable": false, "speed": 1, "opacity_min": 0.1, "sync": false }
},
"size": {
"value": 3,
"random": true,
"anim": { "enable": false, "speed": 40, "size_min": 0.1, "sync": false }
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#3B71FE",
"opacity": 0.2,
"width": 1
},
"move": {
"enable": true,
"speed": 2,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": { "enable": false, "rotateX": 600, "rotateY": 1200 }
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": { "enable": true, "mode": "grab" },
"onclick": { "enable": true, "mode": "push" },
"resize": true
},
"modes": {
"grab": { "distance": 140, "line_linked": { "opacity": 1 } },
"bubble": { "distance": 400, "size": 40, "duration": 2, "opacity": 8, "speed": 3 },
"repulse": { "distance": 200, "duration": 0.4 },
"push": { "particles_nb": 4 },
"remove": { "particles_nb": 2 }
}
},
"retina_detect": true
});
};
document.head.appendChild(script);
}
}
customElements.define('particle-background', ParticleBackground); |