I can't seem to get particles.js working--what exactly am I doing wrong? Any insights would be appreciated, I can't determine if the error is due to an external dependency or not...
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
}
Particles. js is a lightweight JavaScript library used for creating particles which looks likes the vertices of polygon. We can also interact by hovering over the particles and create more particles by clicking on particles.
Problem solved--I needed to make a separate javascript file called app.js and put the JSON in that as a JS function (see how they did their demo and fiddle around with it till you can make it do what you want)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With