Scroll-Triggered Background Colors

What You'll Create

Create section backgrounds in Squarespace that smoothly transition between colors as visitors scroll through the page. Each section can trigger a different background color change, creating an immersive, color-shifting experience.

The Problem It Solves

Squarespace sections have static background colors. Creating a page where the entire background smoothly transitions as users scroll between sections - like a mood that shifts through a narrative - requires JavaScript intersection observation and CSS variable manipulation.

Perfect For

Storytelling pages, Brand showcases, Product journeys, Portfolio presentations, Immersive landing pages.

What Makes This Different

Code detects when special marker elements (style-blocks with color data) enter the visible screen area, then updates the site-wide background color variable. Smooth transitions create color fades between states over 0.8 seconds. The technique works with any number of sections and colors.

Details

• Section Type: Fluid & Classic

• Code Type: CSS + JavaScript

• Prerequisites: Code blocks with data-color attributes placed in sections

• Toolkit Title: Scroll-based Background Color change

Learn This Technique

This is one of 150+ code techniques taught inside Standout Squarespace, where you get:

• The complete, copy-paste code

• Video walkthrough explaining how it works

• The principles behind the technique so you can customize it

• Access to our private community for support