How to add parallax scroll to squarespace 7.1

how to add parallax scroll to squarespace

So you may have noticed some differences between squarespace 7.0 and 7.1. One big difference being the parallax scrolling effect is now missing in squarespace 7.1! But we have an easy hack to get your squarespace site to use parallax scrolling for all banner images.

HOW TO INSTALL PARALLAX SCROLLING

Go to > Settings > Advanced > Code Injection then paste the below code into the footer area

Hit save and that’s it! You will now have beautiful parallax scrolling on your squarespace website!


<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{background-color:transparent!important}.has-background .section-background{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>

Did I help you? Consider buying me a coffee as thanks!


Previous
Previous

Shrink the header logo on scroll in Squarespace 7.1

Next
Next

Add A Button To The Announcement Bar In Squarespace