Friday, July 09, 2021
The Great Tit
Updated: 20. 9. 2022, Added: 9. 7. 2021

Particles.js in Oxygen Builder

Particles.js is a lightweight JavaScript library for creating particles. Particles are used to create interactive backgrounds that respond to the mouse movements.

Do you want to use it on you Oxygen website? Okay, no problem. You just need to embed the particles.js script – I will do that with the Advanced scripts plugin – and use the code block in Oxygen builder interface.

Include particles.js in WordPress

There are many ways how to embed the script to the WordPress. You can use your custom plugin or some custom code snippets plugin. How to include your CSS and JS files in WordPress: https://developer.wordpress.org/themes/basics/including-css-javascript/

Here is the link for the Particles.js javascript file on CDN:

https://cdn.jsdelivr.net/npm/[email protected]/particles.min.js

You can generate your own link here: https://www.jsdelivr.com/package/npm/particles.js.

And this i show to include it with Advanced scripts plugin:

Advanced scripts inlcuding external .js file

#TIP: Include the script only on post you need with conditionals in Advanced Scripts

Conditionals in Advanced Scripts

When you embed the script, go to your page, and add the Code Block. After thet, set the ID of code block to particles-js and set these styles in Oxygen editor:

#particles-js {
     Position:absolute;
     Top:0;
     Left:0;
}

Don’t forget to set the parent to

position:relative;

My structure looks like this:

Section - with background
Div - with CTA
Button - for CTA
Code Block - with particles.js

Now go back to the particles.js website and download the json file with particles you want to use on your website.

particles.js generator

Open the file in code editor (I am using VS Code) and put it in the Oxygen's Code Block's javascript section.

particlesJS("particles-js", 
// PUT YOUR JSON CONFIG DATA HERE
{
  "particles": {
    "number": {
      "value": 160,
      "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": 1,
      "random": true,
      "anim": {
        "enable": true,
        "speed": 1,
        "opacity_min": 0,
        "sync": false
      }
    },
    "size": {
      "value": 3,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 4,
        "size_min": 0.3,
        "sync": false
      }
    },
    "line_linked": {
      "enable": false,
      "distance": 150,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 1,
      "direction": "none",
      "random": true,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 600
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "bubble"
      },
      "onclick": {
        "enable": true,
        "mode": "repulse"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 400,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 250,
        "size": 0,
        "duration": 2,
        "opacity": 0,
        "speed": 3
      },
      "repulse": {
        "distance": 400,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
}
// END OF JSON CONFIG
);

#TIP: Create multiple configs and use them as a shortcodes

Create a new script in advanced scripts, set the type to JavaScript Custom Code and set Location as Shortcode. Then put the code inside. After that, go to page you want to use the config, set the ID #particles-js to element which should use the particles and add the shortcode.

particlesJS("particles-js", 
//YOUR JSON CONFIG HERE
);
Custom shortcode in Advanced scripts

This way is easy to use for example in Gutenberg editor. You just need to add the group with ID #particles-js and the shortcode inside the group.

Using particles inside Gutenberg editor.

#TIP: Change the ID of Particles.js element

If you want to display the particles in element with other ID than #particles-js, just change the id in your code:

particlesJS("change-the-id-here", 
//YOUR JSON CONFIG HERE
);

How does it looks like?

Particles are not avaible to see in Backend of Oxygen builder, but you can see them now in the frontend.

Enjoy the particles and sent your examples to the comments! ❤️

Did I help you? Support me on Patreon!
Beep this article to your friends!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

12 comments on “Particles.js in Oxygen Builder”

  1. Thanks for the help, look at my services page, the particles bounce and I can't make them go up. How can I do it? Thank you

        1. You did not followed the tutorial :).

          1) You need to set up the ID to the code block to the #particles-js
          2) Code block must be inside the section, which should be covered by particles
          3) Section must be set to position:relative
          4) Code block must be styled at least with:
          Position:absolute;
          Top:0;
          Left:0;

          Then it works fine 🙂

  2. Hi i have implemented this tutorial to the best of my ability. But im having issues with the particles stretching out if i activate the flex box in the section where the heading, button and code block are. It also effects the cursor effect on the particles. What would you suggest i try to resolve this issue?

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram