Aleš Sýkora wrote

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! ❤️

2 comments on “Particles.js in Oxygen Builder”

Leave a Reply to Aleš Sýkora Cancel 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.

More from category
Aleš Sýkora wrote
Best practise for jQuery in Toolset
3. 7. 2019 in
Let me explain best practices for using jQuery inside a View, Form or Content Template's JS panel.
Read More
Aleš Sýkora wrote
Add icon to the menu with custom SVG
2. 4. 2021 in
If you need to add icon to the menu item in WordPress you can find many tutorials using fontawesome, plugins or other icon packs embedded from other sites. For my purposes – loading of more external scripts is not good solution. So when I need to add my custom icon to the menu I do […]
Read More
Aleš Sýkora wrote
Display list of WooCommerce categories
19. 2. 2021 in
If you need to display list of all WooCommerce categories without products, you can use my code. It will display all categories with link to their archive page. It will also display category image, name of course and count of products inside the category. It is all wrapped in HTML with OxyNinja framework applied. So […]
Read More
magnifiercross linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram