Add interactive particles to sections on Squarespace

A lot of people have asked me about the particles on my website, so I wanted to finally create a resource online that explains exactly how to do it. In this article, you’ll learn how to add interactive particles to sections on Squarespace - no fluff, just what you need to know. If you find the article useful, feel free to share it with the world using the social sharing icons on this page. Thank you!

---

1. Why use this code?

Squarespace’s native options for backgrounds can be cool, but sometimes you just need that little something extra.

Credits for the particle JavaScript files go to Vincent Garreau. You can see the original particle generator here. There was also a demo of this with the code here, but it’s not very clear how to implement, so I wanted to create a concise, informational guide that clears everything up nicely.

🚨 You’ll need to download the Squarespace Block Identifier chrome extension to target the correct sections in the code below.

🚨🚨 You’ll also need to know how to upload files. See my quick tutorial on this here if you need to learn.

View fullsize

---

📩 Join the inner circle to get exclusive code updates

---

2. The code

Upload files to site:

Particles.js
App.js

Paste where? Design > Custom CSS

// Particles //

section[data-section-id="REPLACE WITH SECTION ID"] #particles-js {

position: absolute;

top: 0.5%;

left: 0.5%;

width: 99%;

height: 99%;

z-index: 0;

background: rgba(0,0,0,0.1);

}

section[data-section-id="REPLACE WITH SECTION ID"] .content {

z-index: 1;

padding: 0%;

}

Paste where? Settings > Advanced > Code Injection > Footer

<!-- append particle canvas to homepage -->

<script>

$('section[data-section-id="REPLACE WITH SECTION ID"]').append('<div id="particles-js"></div>');

</script>

<!-- End append particle canvas -->

---

3. Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

---

Want more?