Squarespace hack: advanced 2 speed parallax scrolling

 

This is one of my fav Squarespace hacks to give sites an extra special look!

It's a very simple, no coding needed, hack of the banner image and parallax scrolling on any template in the Brine family. With this hack you can make your content appear to parallax scroll at two different speeds.

Here's an example from one of my recent clients on sequelpd.com.

 

Templates this works on: To make this work, you need a template that has parallax scrolling and the ability to add blocks on top of a banner.

As of writing (August 2017), that means anything in the Brine template family (Brine, Aria, Basil, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Jaunt, Juke, Keene, Lincoln (discontinued), Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Polaris, Rally, Rover, Sofia, Sonny, Sonora, Thorne, Wav, and West).

 

Step 1. Create your background banner image. To make this look really effective, make part of your banner background image white (assuming the background of your website is white). You can easily use Canva or Adobe Illustrator to create this.

Here's the banner image I used for sequelpd.com

 

Step 2. Ensure parallax is turned on in your Style Editor (Design > Style Editor > search 'parallax' > click enable)

Step 3. Back in your pages section, click the gear icon on the page you want to have this feature on

Step 4. Upload your banner image and click save

Step 5. Click edit on the banner image and add multiple spacer blocks to lengthen the area of the banner image in view.

 

Step 6. Add your image in, use spacer blocks to the left and right to arrange how much of the page you want your 'on top' image to take up.

Step 7. Click save

 

As you can see, this hack is super simple to set up, and looks really unique! 

You can do this on as many pages as you'd like, or also stack banners one after the other in an Index to make this look even more different!

 

You'll also love...