Add an embed element with the code that you see on the right
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.
Add this code to the custom CSS of your site. You can fix where the particles show with those settings. Here it starts at 45% of the fold height.
#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>
How to add Particles.js to Brizy
Any ideas or Requests
Thanks
Feel free to contact us.
if you have any Hacks that would be great to add or any ideas you would like to be solved with Brizy cloud, You can write at contact@monsieurclick.com or use the form to upload images and ideas. Thanks a lot !!!
If you want just to say thank you or help us maintain this page, Feel free to donate whatever you want