In this tutorial we will be looking at the Particle.js JavaScript library which allows us to create really cool particle systems and effects. We will configure things like number of particles, colors, movement, interactivity and more. We will also build a login box over the particle js canvas.
Add custom ID: "#particles-1" to block hero
Code js:
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
particlesJS("particles-1", {
"particles": {
"number": {
"value": 80,
"density": {
"enable": !0,
"value_area": 4000
}
},
"color": {
"value": ["#FFFFFF", "#FFFFFF", "#FFFFFF"]
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#fff"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 33,
"height": 33
}
},
"opacity": {
"value": 0.15,
"random": !0,
"anim": {
"enable": !0,
"speed": 0.2,
"opacity_min": 0.15,
"sync": !1
}
},
"size": {
"value": 50,
"random": !0,
"anim": {
"enable": !0,
"speed": 2,
"size_min": 5,
"sync": !1
}
},
"line_linked": {
"enable": !1,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": !0,
"speed": 1,
"direction": "top",
"random": !0,
"straight": !1,
"out_mode": "out",
"bounce": !1,
"attract": {
"enable": !1,
"rotateX": 600,
"rotateY": 600
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": !1,
"mode": "bubble"
},
"onclick": {
"enable": !1,
"mode": "repulse"
},
"resize": !0
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1,
}
},
"bubble": {
"distance": 250,
"size": 0,
"duration": 2,
"opacity": 0,
"speed": 3
},
"repulse": {
"distance": 400,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": !0
});
</script>
How to use it
Download file demo.zip, upload to Brizy. Done (Then you can see the css code from here)
*Note: License Pro is required for the functions to work
Key word:
How to add particles.js to Bulma hero background? Particles Background, How to add particle effect on Hero section background?
