How to Add Parallax Scrolling to your Squarespace Website

Squarespace 7.1 saw a great platform become even better. With so many features added into Squarespace, a fan-favourite saw its demise for now, Parallax scrolling was no longer supported, but here is an addition you can make to bring it back to your website!

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 nostalgic entertainment and user experiences, but the trend has really picked up in recent years in the field of web design. You can also customise the speed of the scroll in the code snippet below.

How to add parallax scrolling to Squarespace 7.1

How do we add parallax scrolling to your Squarespace 7.1 site? Even though it’s no longer featured, it’s possible to add this effect in thanks to some code injections.

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 (Change the 0.8 next to speed to the preferred speed):

// Parallax Scrolling // 

<script> src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.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');
    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: 0.8,
    })
});
document.getElementsByTagName("body")[0].onresize = function() {
    setTimeout(function() {
        jQuery(window).trigger('resize').trigger('scroll')
    }, 100)
}; 
</script>

<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></code></pre>