Particles.JS (and animated backgrounds) On Oxygen Builder

By James LePage
 on July 19, 2020
Last modified on January 7th, 2022

Particles.JS (and animated backgrounds) On Oxygen Builder

By James LePage
 on July 19, 2020
Last modified on January 7th, 2022

In this article we're going to discuss a quick and easy way to add particles.js and other animated backgrounds to your website created with Oxygen Builder.

If you've ever stumbled across an interactive background that has a web like pattern, chances are it is powered by a JavaScript library called “particles.JS”. This allows you to create really cool, interactive backgrounds and over the years has expanded to fit multiple use cases.

Here's an example of what you can do with Particles.JS in an Oxygen site:

Because it's so easy to incorporate third party code into Oxygen Builder using the native “code block”, implementing particles.JS is a simple task. We will be looking at the implementation of the basic library, as well as some other animated backgrounds to spruce up your WordPress website.

How To Add Particles.JS To Oxygen Builder

This is fairly simple. First, we are going to add a DIV to our page, expanded to be 100% wide, make it however tall it needs to be, incorporate the particles, and then add content in front of it.

Add The Div

Instead of using a section, we use a DIV, as that's what the base library is set up to applies to. In this example, we've set the DIV to be 100% wide and 100vh tall. this makes it a full screen “hero”. Be sure to place the DIV outside of any sections (it will basically become a section of its own).

Finally, change the ID of the DIV from whatever is automatically generated for it to “particles-js”.

We also changed the background of the DIV to dark grey.

Add Particles.JS

To add Particles.JS to Oxygen, we will be using a single code block. Add a code block to the inside of the DIV. Then, within the HTML section of the code block, add this:

<script src=""></script> <script type="text/javascript"> particlesJS("particles-js", { "particles": { "number": { "value": 80, "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": "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 } );var count_particles, stats, update; stats = new Stats; stats.setMode(0); = 'absolute'; = '0px'; = '0px'; document.body.appendChild(stats.domElement); count_particles = document.querySelector('.js-count-particles'); update = function() { stats.begin(); stats.end(); if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) { count_particles.innerText = window.pJSDom[0].pJS.particles.array.length; } requestAnimationFrame(update); }; requestAnimationFrame(update);; </script>
Code language: HTML, XML (xml)

This code adds the Particles.JS library to our website through a CDN. That means that we don't need to host it ourselves.

After adding the library, the config JSON is pasted directly into the block. You can use the JSON in the above code (located between lines 5-110), or you can generate your own here. After that, the Particles should display on the front end of your website. An issue with this method is that you won't be able to see it on the back end, but this can actually be beneficial as it makes everything load quicker.

By using the div element in oxygen, you can build the site as you want with this applied as your background. For example, we're going to add a header and background image to our hero. The Particles.JS adds a nice effect!

You could implement this in a much better way by layering various sections of the image. For example, the dark purple background could be placed behind the Particles.JS div, while The building an additional elements would go in front of the effect. That way, it would look like the particles only displayed in the background.

There are some other ways to add Particles.js to a website created with Oxygen Builder. For example, you can use the Code Snippets plugin to injected directly into the header of your website.

However, if you're looking for a quick and dirty method to add particles JS to a specific section on an individual page using Oxygen, this does thejob.

Example Particles.JS Backgrounds in Oxygen

The Particle.JS Library is much more than an interconnected web. You can add many affects that interact with your mouse, which could be very useful for some background applications. Here are a collection of Particle.JS effects that we found on Codepen which could work well as backgrounds in an Oxygen Builder website.

Use it to add stars to your Oxygen Builder website.

Or snow.

Or polka-dots?


Hopefully this article introduced an extremely quick and easy way to add Particles.JS to Oxygen. there are some other methods which may be better for some applications, but if you're looking to add this effect to a simple section of one page on your website, this works well.

Join The IsoGroup
A vibrant Facebook Group to talk about web design and the business of agency. Daily curated resources and conversations.
Oxygen Builder Course - Coming Soon
The Oxygen Builder Mastery course will bring you from beginner to professional - ACF, MetaBox & WooCommerce modules included.
Get Launch Notification & Discount
Bricks Builder Course - Coming Soon
The Bricks Builder Mastery course will bring you up to speed on this popular builder.
Get Launch Notification & Discount
Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Notify of
Newest Most Voted
Inline Feedbacks
View all comments
1 year ago

Very nice effect but it would not let me add anything over the particles DIV. All other elements will not stay on top. I tried Header, Image even just a text block When I open up the front end. they were always showing below the particles background. Even after setting the VH to 100 like the article said. So I would love to know how you achieved that effect where you show that purple building in front of the particles.
Really got me on the this one HA HA.

1 year ago
Reply to  Una

I had this same issue, but I managed to "fix" it.

What I did was put the div with code block into another section and make the section width and height same as the div (100% and 100 vh respectively). Also, set the "section container width" to "full width" and remove the padding from the section.

Then I set the div and the section to relative position and the div's z-index to -1 (in the advanced > layout options).

Then made a new div with the things I want on top of the effect and made it absolute position and set it's z-index to 1(this ensures you can interact with buttons or links you put this div. You can move this div around using margins (make sure to use the same measurements, in this case, % for horizontal position and vh for vertical position).

Hope it helps.

1 year ago

I have not been able to add the particle js into Oxygen. Please help me. I think I missed some steps in here.

1 year ago

I think it do not work anymore

Article By
James LePage
James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram