Particles.JS (and animated backgrounds) On Oxygen Builder

Authored By: James LePage
Published On: July 19, 2020

Affiliate Disclosure: Some links on this website are affiliate links. We make commissions for purchases made through those links.

We only recommend items/tools that we've personally used and like.

Full Disclosure | FTC Statement

amazon elementor E book

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="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></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); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '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>

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?

Conclusion

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 Our Growing Mailing List Of Design Crazed Individuals

Expertly curated emails that will help you generate more income through good design.

You're in the club 💪.

Something went wrong.

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Una
19 days 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.

James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!

Social Share

Crafting Stunning Digital Appearances & Assets Out Of New York.
Get In Touch
Syracuse, NY | Charlotte, NC | New York, NY
© 2020 Isotropic, LLC
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram