Parallax Section Generator
Add depth to any Squarespace section with parallax scrolling. Fixed backgrounds or smooth transform-based movement — both generated and ready to paste.
Controls
<style>
/* Add this class to any Squarespace section via section ID */
.sq-parallax-section {
position: relative;
height: 600px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
}
.sq-parallax-overlay {
position: absolute;
inset: 0;
background: #000000;
opacity: 0.4;
pointer-events: none;
}
.sq-parallax-content {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #ffffff;
text-align: center;
z-index: 2;
padding: 40px;
}
.sq-parallax-content h2 {
font-size: 48px;
font-weight: 600;
margin-bottom: 16px;
text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.sq-parallax-content p {
font-size: 18px;
font-weight: 300;
opacity: 0.9;
text-shadow: 0 1px 10px rgba(0,0,0,0.3);
}
</style>
<!-- Add via Code Block inside the target section -->
<div class="sq-parallax-overlay"></div>
<div class="sq-parallax-content">
<h2>Your Story Starts Here</h2>
<p>Scroll down and watch the magic happen</p>
</div>
<script>
/* Apply parallax class to target section */
(function() {
/* Replace '#your-section-id' with the actual section ID from Squarespace */
var section = document.querySelector('#your-section-id');
if (section) {
section.classList.add('sq-parallax-section');
}
})();
</script>Why this matters
Depth without complexity
Parallax adds a sense of physical depth to a flat screen. It makes scrolling feel intentional — visitors notice they're on a crafted site, not a template.
Two approaches, one goal
CSS background-attachment: fixed works everywhere with zero JavaScript. The transform approach is smoother on mobile but needs a few lines of JS. Pick your trade-off.
Performance-first code
Transform-based parallax uses will-change and translate3d for GPU acceleration. Passive scroll listeners prevent jank. This is how agencies build it.
How to add this to Squarespace
Find the section you want to parallax in your Squarespace editor and click the pencil icon to get its section ID.
Copy the generated code above.
Paste the CSS + JS into Settings → Advanced → Code Injection → Footer.
Replace '#your-section-id' in the code with the actual section ID from step 1.
If using text overlay, add a Code Block inside the section and paste the HTML portion.
A little over your head?
No shame — this stuff is hard. Let the pros handle it.
