I have noticed that a lot of high-end websites sometimes have particles floating around on their background. This intrigued me and I wanted to know more about this. That is when I landed upon this JavaScript library developed by Mr. Vincent Garreau. So, in this post, I am going to show you how to add particles to your website using particle.js. There is a lot of customization that can be done with this, so let us get started!
How to use it for brizy cloud:
Add code javascript at the lowest point of your site or in the menu and edit it to reflect how you want it to show.
You can change the color, the speed etc… Watch the variables.
More detail here: https://github.com/VincentGarreau/particles.js/
JavaScript:
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
/* ---- particles.js config ---- */
particlesJS("particles-js", {
"particles": {
"number": {
"value": 100,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"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": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 6,
"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
});
</script>
Add ID with name "particles-js" to Block Hero
(Need to write correctly for the code to work)
Add the css code to the css customizer
Code CSS:
#particles-js canvas.particles-js-canvas-el {
position: absolute;
top: 0;
}
Donate a cup of coffee if it helps you!!!
