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

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
ACF Masonry Left to right ordered Gallery in Oxygen Builder /w Colcade
Would you like to use ACF masonry gallery with left to right flow of images? Good, let’s do that! But at first, why not to use standard Gallery module in Oxygen Builder? The problem with Oxygen Masonry gallery The main problem is ordering of images. Standard masonry layout is made by Flexbox columns. So Your […]
Read More
Aleš Sýkora wrote
Featured products query WooCommerce
11. 4. 2021 in
If you are using your own queries for WooCommerce stores, for example in Oxygen builder’s custom code block then you may need query for featured products. You can use the query I am using inside my product sliders :-).
Read More
Aleš Sýkora wrote
Fix WooCommerce coupon input in Oxygen
9. 4. 2021 in ,
The field for adding coupons in WooCommerce cart is horrible in Oxygen. If you want to fix it from: Before: After: Then feel free to use and edit my CSS:
Read More
magnifiercross linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram