isotropic-2022
Share
Blog
Search
Menu

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="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>

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?

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.

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.
Subscribe
Notify of
guest
6 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Una
Una
3 years 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.

Shone
Shone
2 years 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.

Gedanggoreng
Gedanggoreng
2 years ago

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

Guilherme
Guilherme
2 years ago

I think it do not work anymore

Everhardt
Everhardt
1 year ago
Reply to  Guilherme

It totally works, what you need to do is ensure that the position is set to relative, and that you use the same DI ID as what is mentioned in the code block, its width and height need to be set to 100% and .... oh, i also found that if you use something that isnt a div, something like columns, then you need to select a custom selector as a div. then it works, or works for me. PS, it is awesome.

Everhardt
Everhardt
1 year ago

question, ps, loved this tutorial, am using particles-js all over the show. What I am trying to do now, is use tsParticles which is the typescript evolution of particles-js. But - fail a lot I am. If you have been able to implement this functionality, would you be so kind as to explain it to a layman like myself. The difference seems to be that 1 - its newer (don't know if that is good) 2 - it allows the particles to adhere to a SVG path.

https://dev.to/tsparticles/tsparticles-polygon-mask-with-color-animation-5b1e is an example of its use.

Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic, a WordPress education company and digital agency. He is also the founder of CodeWP.ai, a venture backed startup bringing AI to WordPress creators.
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