[Resolved] particles.js now showing

[Yaron]

Hello Tom, hope you are doing fine 🙂

i tried working with this tutorial:
http://cakewp.com/divi-tutorials/add-nice-moving-particles-background-effect/

i have installed the plugin
i generated some particles on http://vincentgarreau.com/particles.js/

i embedded the code in between

particlesJS('UNIQUE_ID_HERE',
     ...
);

instead of “UNIQUE_ID_HERE” i tried to put “page” because i can see this id on inspect element, and no particle showed up.. i tried changing the id again to “particles” and put “particles” id on elementor section, but still nothing is showing up… i am stuck on how to show it.. any idea?

[Tom]

Hi there,

There’s a couple posts on the forum that might help:
https://generatepress.com/forums/topic/particles-web-matrix-effect/
https://generatepress.com/forums/topic/particles-background-example/
https://generatepress.com/forums/topic/particle-js-cover-the-whole-website/
https://generatepress.com/forums/topic/partical-js-question/

Hope this helps 🙂

[Yaron]

i have managed to fix the issue, i wrote this code just below the body

<div id="particles-js"></div>

and then iv’e added this custom css:

#particles-js canvas {
    display: block;
    vertical-align: bottom;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    -webkit-transition: opacity .8s ease, -webkit-transform 1.4s ease;
    transition: opacity .8s ease, transform 1.4s ease
}

#particles-js {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -10;
    top: 0;
    left: 0
}

and then on the particle js plugin when you embed the json, i changed the id to “particles-js”.
and it works great!! thanks again

[Tom]

Perfect, glad you got it working! 🙂

[Author]

Posts