Add Particles.js to Your Squarespace Site

Particles.js background on Squarespace

Particles.js is a lightweight plugin that adds motion and interaction to your Squarespace site. You can set up a Particles.js background on your site in five steps:

1. Upload the Javascript file
2. Inject Particles.js and Javascript file into the header
3. Add CSS styles
4. Add custom code-block with target div

Let's go through each of steps.

---

Upload the Javascript file

First you should upload this file to your Squarespace site: https://github.com/michaelsynan/squarespace-files/blob/main/floatingMO.js

The technique uses the Mutation Observer API to make sure the necessary script doesn't load until its target div has been rendered. To upload a file to Squarespace you need to go to "pages" -> new page -> "link" -> gear icon -> "file" -> "upload file" (I know its a little unintuitive). Note the link address, which is "/s/floatingMO.js" in this case.

Inject Javascript into your Squarespace site

To inject your new Javascript file you need to go to "settings" -> "developer tools" -> "code injection", then place the following code in the header (remember to check your javasript file link):

<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script src="/s/floatingMO.js"></script>

Add CSS Styles

"design" -> "custom CSS"

#particles-js-wrapper {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: #000;
    z-index: -1;
}

#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
}

#particles-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: red;
    z-index: 1;
}

Add Custom Code Block

Go to the editor in your Squarespace site and add the following code block:

<div id="particles-js-wrapper">
    <div id="particles-js"></div>
</div>

It's important to note that the code above targets the div "#particles-js" - if you want to change this you should update the JavaScript GitHub file linked to above.

If you just want to play around with Particles.js outside of Squarespace, you can check out my CodePen here. Feel free to fork it and post your Pens below - I'll be sure to like and reply.

Enjoy and feel free to reach out if you have any questions!