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.
Want a framework for designing the perfect homepage?
// 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 -->
Need an expert to build your Squarespace website?
Book a free kick-off call with our team to discuss your project requirements in detail.
