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 fabian 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
Add placeholder to the search form in Views
26. 7. 2018 in
Learn how to show a placeholder text in the search field made with Toolset Views via custom jQuery.
Read More
Aleš Sýkora wrote
Change GDPR field response data in Fluent Forms
15. 4. 2021 in
If you want to change the “Accepted” to something else, use the first snippet and change the $response variable. If you want to change the Terms and Condition and GDPR field response, use this code:
Read More
Aleš Sýkora wrote
Translate labels in Iconic Delivery Slots
21. 1. 2021 in
If you need to change labels of fields added by Iconic Delivery Slots to WooCommerce checkout, use this snippet:
Read More
magnifiercross linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram