Image Parallax on Scroll

What You'll Create

Images that move at a different speed than the rest of your page content as visitors scroll, creating that popular layered depth effect. Images appear to float independently, adding dimension and polish to any layout.

The Problem It Solves

Squarespace's built-in parallax only works on section backgrounds, not on regular image blocks. This technique extends parallax to any image on your page, giving you much more creative flexibility for portfolio pieces, product showcases, and visual storytelling.

Perfect For

Landing pages, Portfolio showcases, Photography sites, Product pages, About pages

What Makes This Different

This technique calculates how far each image has scrolled into view and shifts it up or down based on that position. The movement speed is adjustable—from subtle floating to dramatic shifts. Unlike section background parallax, this works on individual images anywhere on your page, so you can mix parallax and static images in the same section.

Details

• Section Type: Fluid & Classic

• Code Type: CSS + JavaScript

• Prerequisites: Page header code injection access, Image blocks on page

• Toolkit Title: Image Parallax on Scroll

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