Particles.js - edit settings and load in other templates

Community How-to
1

Good day everyone!

I am referring to a JavaScript animation found in the Sitejet template “The Domain”:

  1. Is there a way to edit the script within the builder? I tried changing the JavaScript values in the code section and saved them, but they remain the same.
  2. Is it possible to use this script in another Sitejet theme? The script is not available as an element.

Thank you.

2

You can use the script on any site: particles.js CDN by jsDelivr

Configure the effect here: particles.js - A lightweight JavaScript library for creating particles (vincentgarreau.com)

Then, export the config JSON and apply to your site.

3

Thank you for the response, Sina.

Unfortunately, I am struggling to get this to work. I have a few questions regarding this:

  1. When I change something in the Website Builder and press save, it doesn’t save the changes when I exit the builder. When I press Publish again after making changes, it saves the changes, but also deletes the js files that I created directly in Cpanel file manager.
    Q: Which is the correct button to save all new changes? Save, or Publish?

  2. The particles script in this theme is only allocated to the top banner. I want the script to be visible on the entire front page. Since there is no banner or container to cover the entire page from header to footer, I tried inserting the script and div in the html section. This broke the site, because the builder doesn’t like extra code before or after {{content}}.
    Q: How and where do I insert this div and script?

Thank you.

4

SOLUTION:
(Sitejet builder for cpanel)

  1. Any additional html code can NOT be entered here:

    Incorrect
    Incorrect979×969 40.6 KB

  2. Instead, it can be entered in almost any element, but I found that the easiest way is to simply add an empty html element and place the particles div, css and script there. Since the element will have no content, it will not be displayed and not interfere with your template:

    Correct01
    Correct011920×1080 189 KB

  3. The following css code is needed to make the particles script visible accross the whole canvas:

#particles-js {
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: -100;
}

Note: The z-index is needed to ensure that the particles don’t cover any content. Also make sure that the site’s background colour is not similar to the particles colour.

Important: Particles.js is an interactive script with hover and click capabilities, but this does not work with a negative z-index. The input (mouse or touch) does not detect all lower levels.

  1. To call the script, simply copy the code in the JavaScript tab from “The Domain” template, and paste it in here:
    JS
    JS987×975 125 KB

After configuring the script like Sina explained above, you can simply change the values accordingly.

1 Like
5

Fantastic work. Thank you @Richard_Honey