How to add Particles.js to Brizy

Add it at the lowest point of your site or in the menu and edit it to reflect how you want it to show.

I changed the height to 250%, so you can see it on the whole site.

You can change the color, the speed etc… Watch the variables.

#particles-js > canvas

{

position:absolute;

top:45vh;

left:0;

width:10%;

height:150%;

}

add "particle-js" as the block Name where you want the particles to show.

<script>

var container = document.createElement('div');

container.id = 'particles-js';

container.style = 'background:transparent; width:100%; height:100%; z-index:0; position:absolute;';

document.body.prepend(container);

</script>

<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

<script>

var particleColor = "#cd775c";

var particleCount = 100;

var particleDensityArea = 800;

particlesJS("particles-js", {

particles: {

number: { value: particleCount, density: { enable: true, value_area: particleDensityArea } },

color: { value: particleColor },

shape: {

type: "circle",

stroke: { width: 0, color: particleColor },

polygon: { nb_sides: 5 },

image: { src: "img/gith.svg", width: 150, height: 150 }

},

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: particleColor,

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: "repulse" },

onclick: { enable: true, mode: "push" },

resize: true

},

modes: {

grab: { distance: 400, 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>