Parallax Banners in Squarespace 7.1 (Updated)

Mar 3

Squarespace recently introduced a new design system known to the public as Squarespace 7.1.

At the time of writing this, Squarespace 7.1 is in early access (meaning some features are likely to change and only a select few have access to this new system). It brings along new ways of adding pages, galleries, sections and editing site styles.

To Squarespace’s credit, there are some nice new features, but like many of my fellow professional Squarespace designers, I was disappointed to find that some popular features and flexibility had been removed.

The Brine family of templates in Squarespace 7.0 offered a lovely, optional parallax feature that could be applied to banner images. 7.1 does not currently offer this option. However, with a little bit of code, we can add a (more flexible) version of the parallax effect to banner images in this updated design system.

NOTE: This is a javascript modification. You will need a business plan or higher to use this feature.

1. Install

In your Squarespace site dashboard, navigate to ‘Settings > Advanced > Code Injection’ and paste the following code into the Footer section of the code injection area:

<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>

2. Customize

The great thing about this parallax implementation is that you can customize its speed, something that you can’t do with the built-in parallax option in Squarespace 7.0.

Change the speed value to create your own custom look:

The value must be between 0 and 1.
The lower the number, the slower the background image moves in relation to the rest of other scrolling elements on the page.

In the code above, I’ve set the speed to 0.8 because I like a subtle parallax. 0 is the most extreme effect, 1 is no parallax motion at all. To each their own though. Play around with it and find your preference.

NOTE: This will not work on mobile or video banners; the image will remain static. Keep reading to learn more about where to find more infornation about applying this to video banners...

Credit

All thanks and credit for this solution goes to Chris over at Schwartz-Edmisten Web Design.
This is an updated article as of March 3rd, because for whatever reason, my previous parallax solution suddenly stopped working. I couldn’t figure it out, but this guy is a Squarespace Guru. Check out his website for all sorts of other amazing Squarespace tutorials, tips, and tricks. His Squarespace 7.1 article also includes details about how to apply parallax to video banners.

Schwartz-Edmisten Web Design ➔