How to Add Parallax Scrolling to Squarespace 7.1 (Updated)

When Squarespace released their newest version of the platform, Squarespace 7.1, in early 2020, we were pretty excited. After all, Squarespace 7.0 had so many great features; in addition to being ridiculously intuitive and easy to use, they also made it simple to add some pretty fancy effects to your website like image animations and parallax background scrolling.

Catch our full breakdown on the difference between Squarespace 7.0 and 7.1 here!

Squarespace 7.1 took an already good thing and delivered on its promise of making it even better. New additions like section-based page building, built-in nav-menu buttons, and selectable color and typography palettes with even more options than ever before truly improved the Squarespace experience.

Buuuut there was one big thing that was missing; parallax scrolling.

EXCITING NEWS - 7.1 now has parallax scrolling built-in. Check it out below!

To enable this feature, by selecting the pencil icon in your section’s editor that you want to update. Then set "Image Effect" and choose the fourth effect under the desired section's background editor window. Be sure to hit save and refresh your window to see it in action.

What is parallax background scrolling?

Parallax background scrolling is a visual effect where the background image scrolls at a different speed (slower) than the rest of the website to create an illusion of depth. You see this a lot in animated films and even early video games from the 90s, but the trend has really picked up in recent years in the field of web design.

How to add parallax scrolling to Squarespace 7.1

So you want to add parallax scrolling to your Squarespace 7.1 site? Even though it’s no longer a native feature, it’s possible to add this effect in thanks to some javascript. This javascript has been updated after having some issue working on live sites.

Step 1. Have sections with background images

Step 2. Add the following code snippet.

Go to Settings > Advanced > Code Injection and paste the following into the “Footer” section:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>

<script> 
  $('.has-background:not(:has(.sqs-video-background))').each(function() {
    var findImage = $(this).find('.section-background img');
    var imgUrl = findImage.data('src') + '?format=2500w';
    var dimensions = findImage.data('image-dimensions');
    var imgWidth = dimensions.substr(0, dimensions.indexOf('x'));
    var imgHeight = dimensions.substr(dimensions.indexOf('x') + 1);
    $(this).parallax({
        imageSrc: imgUrl,
        naturalWidth: imgWidth,
        naturalHeight: imgHeight,
        speed: .5,
    })
});
document.getElementsByTagName("body")[0].onresize = function() {
    setTimeout(function() {
        jQuery(window).trigger('resize').trigger('scroll')
    }, 100)
}; 
</script>

<style>.has-background,.has-background .section-background,.has-background .section-border, .has-background .section-divider{background-color:transparent!important}.has-background .section-background img{visibility:hidden!important}main .has-background.background-width--inset{margin:4vw;padding:0!important}main .has-background.background-width--inset:not(.content-collection):not(.gallery-section) .section-background{top:0!important;right:0!important;bottom:0!important;left:0!important}.sqs-catalog .section-background img{visibility:visible!important;}.has-background .section-background .sqs-video-background img{visibility:visible!important}</style>

<style>.has-background{background-color:transparent!important}.has-background .section-background{background-color:transparent!important}.has-background .section-background img{visibility:hidden!important}.has-background.background-width--inset{margin:4vw;padding:0!important}.has-background.background-width--inset:not(.content-collection):not(.gallery-section) .section-background{top:0!important;right:0!important;bottom:0!important;left:0!important}</style>

Congrats! You should now have parallax scrolling on all page sections with a background image!

Customizations

Ok, you’ve got parallax working but you want to customize it a bit more. No worries, here are a few tweaks you can make to refine the look of your site.

Control the scroll speed

• Within the code snippet above, you can modify the “speed” attribute to control the parallax scroll speed. “0” means the image is completely fixed, and 1 means there is no parallax, so play around with the decimal values to try different effects.

Control the image overlap (bleed)

• You can also modify the “bleed” attribute in the snippet above, which controls how much of the image extends beyond the viewing container. This can help if you’re having issues fitting your image in, or if you are experiencing stuttering in your parallax scroll.

Caveats

• This code snippet doesn’t support parallax on mobile devices. Instead, a static image will be displayed. It also doesn’t work for sections with video background.

In our opinion, this is probably for the best. While animated features like parallax scrolling add some unique flair to a site, if used in excess they can become a bit overwhelming. Factor in a small screen browsing experience, and it might be just a tad too much for your mobile viewers. Likewise, parallax video is just a few too many moving parts at once for our tastes. Remember, less is more when it comes to features like this.

Also, the Code Injection feature is only available for websites on the premium Business or Commerce paid plans; you’ll need to be using one of those pricing plans in order to use this hack.

Shoutout

This post and corresponding code snippet was inspired by the blog post and YouTube video by Chris over at Schwartz-Edmisten. Be sure to check out Chris’ amazing Squarespace tutorials on his website.

This snippet also uses the parallax.js library, you can find out more here.

Wrapping up

Like we’ve said before, Squarespace 7.1 is the best version of Squarespace yet and in our opinion the single best choice when it comes to DIYing your own blog or website. One the biggest gripes with the newest version though was the lack of parallax; but now that that issue is resolved with this simple workaround, we can’t think of anything bad to say about 7.1!

We hope you’ve enjoyed this tutorial, and if you have any questions or you’ve added this feature to your site and want to show off, be sure to share in the comments below!