Parallax Images with Rellax.js

Code Toolkit
Written By Squarestylist Support

What You'll Create

Parallax scrolling effects in Squarespace where images move at different speeds, triggered by filename keywords.

The Problem It Solves

Default images scroll at the same rate as content. This technique adds depth and visual interest by making specific images scroll at different speeds relative to other page elements.

Perfect For

Creative portfolios, landing pages, hero sections, visual storytelling, immersive experiences.

What Makes This Different

Uses a lightweight library for smooth parallax calculations. Automatically targets images with "rellax" in their filename and applies the effect. Desktop-only option available.

Details

  • Section Type: Fluid Engine

  • Code Type: CSS + JavaScript

  • Prerequisites: Images with "rellax" keyword in filename

  • Toolkit Title: Parallax Images

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

Get Access to Standout Squarespace →
Squarestylist Support
Previous

Gliding Letters Animation
Next

Wavy Background for Scrolling Text