[Resolved] Particles background example

[Christophe]

Hi Tom,

Your awesome particles example on this topic:
https://generatepress.com/forums/topic/particles-web-matrix-effect/ (reply #249071)
Is this made with the header option?
And how you do it add some elements ‘above’ the particles?

Christophe

[Tom]

The text and content are in the page header add-on, but the actual particles container is in the wp_footer hook with this CSS added:

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

That’s what makes it full width and height.

Hope this helps 🙂

[Christophe]

Thanks for the answer Tom.

You do it without the plugin?

I try it.

[Christophe]

Hi Tom,

I try it, but don’t know how you do this.
There are several files,
Add you the js files with this Wp function in the wp_footer hook?
wp_enqueue_script( 'script', plugin_dir_url( __FILE__ ) . '/js/script.js', array( 'jquery' ), '1.0.0', true );
And where adding the json-file?

Have you a small step-by-step tutorial how do this?

I know there is a plugin for that, but i will learn it without the plugin so i understand how it works.

Hope you can help me.

Christophe

[Christophe]

Ok, i try plan B and try it again with the ‘particles background’ plugin.
Adding this content in the Header option:

<div>
<div>
Dit is een titel
<a href="#">test</a>
</div>
</div>

Set fullscreen.

Adding a z-index, but the particles are always above the content.
I will try your solution how you do this without plugin.

Christophe

[Tom]

Actually, Jamal highlighted it very well in this post: https://generatepress.com/forums/topic/particles-web-matrix-effect/#post-249485

If you follow those steps you should be able to get it to work without a plugin 🙂

[Christophe]

Hi Tom,

You’re right.
I try follow this steps.

Christophe

[Author]

Posts