Particles.js doesn't seem to be functioning properly for me—I'm struggling to pinpoint the issue. Any guidance or suggestions would be greatly welcomed, as I'm unsure whether it's related to an external dependency...
HTML:
<div id = "particles-js"></div>
<!-- particles -->
<script src = "particles.js-master/particles.min.js"></script>
CSS:
/* ---- particles.js container ---- */
#particles-js{
width: 100%;
background-color: #3284BF;
background-image: url('');
background-position: 50% 50%;
background-repeat: no-repeat;
}
Javascript:
/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS.load('particles-js', 'particles.js-master/particles.json', function() {
console.log('callback - particles.js config loaded');
});
JSON
{
"particles": {
"number": {
"value": 100,
"density": {
"enable": true,
"value_area": 1500
}
},
"color": {
"value": "#ffb300"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 1,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 3.945738208161363,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 3,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 1200,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "grab"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 200,
"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
}