Particles.JS (and animated backgrounds) On Oxygen Builder

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.