Parallax Scrolling Code No Longer Working :(

Hello! 👋

I am having an issue with parallax scrolling for background images. It seems that the issue arose about the same time that SS had headers and footers disappearing/changing colors. According to the SS status page, the header/footer issue had been fixed but apparently that fix caused the following code to stop working altogether. The problem is that, when I put the following code into the Settings > Advanced > Code Injection > Footer section, all of my background images completely disappear. 

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

I have been using the code above flawlessly on multiple sites for some time without a hiccup until recently. I tried using SS built-in parallax engine for my background images but it isn't nearly as smooth as what the above code did for background images. My websites just aren't the same without it. 

I have also tried other similar bits of code that is supposed to do the same thing (actually, used to do the same thing before the SS header/footer issue) as the above code but those will not work either. 

I was wondering if anyone has had similar issues as I am having or maybe someone could look at the code above to see what might be causing the background images to completely disappear?

Thanks in advance for your time!

Website: https://cello-dachshund-wage.squarespace.com/config/

Password: WCB2022

This post may answer your question, the coding for backgrounds was subtly changed on the backend, so you may need to update your code:

6 minutes ago, Ziggy said:

This post may answer your question, the coding for backgrounds was subtly changed on the backend, so you may need to update your code:

 

Hi Ziggy! Thank you so much for taking the time to answer my concern, however, the link that you suggested says that I do not have permission to see it. I'd love to see the link as it may be helpful to me. Do you have an idea as to why I am blocked from seeing the link?

Thanks again!

You could see it if you signed up to be a Circle Member. But this is the gist of it, there was a change on Thursday last week:

Current State:

<div class="page-section" ...>
  <div class="section-background">...</div>
  <div class="content-wrapper">

Updated State:

<div class="page-section" ...>
  <div class="section-border">
    <div class="section-background">...</div>
  </div>
  <div class="content-wrapper">

Ziggy, I am having the same issue. Are you saying we should use the above code?

@sarahcalvin no, the HTML I shared was purely a demonstration of the backend setup change that should help you tweak your code if you've had an issue with the change that happened last week.

Hey Ziggy! I'm having this same issue with the parallax code no longer working. Did y'all find a solution? Fingers crossed!

Hello, 

This is a thread that dates back to 2 months ago and does not seem to reach to a solution. I came across this thread yesterday due to the same problem I am having. So below link apparently solved my problem. I hope it does it for you too. Then again, I guess squarespace added parallax effect for background images for its updated 7.1 platform. FYI.

Here's the link: https://schwartz-edmisten.com/blog/how-to-add-parallax-to-squarespace-7-1