Jump to content

Parallax Scrolling Code No Longer Working :(

Go to solution Solved by Ziggy,

Recommended Posts

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

Edited by Obi-Wan
Added website info/password
Link to comment
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!

image.png.335b11eaf57a623911a4e01c9aa4c30c.png

Link to comment
  • Solution

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

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

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

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.