Jump to content

Parallax Scrolling Code No Longer Working :(

Recommended Posts

Posted (edited)

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
Posted

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

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Posted
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

Posted

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 helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Posted

@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 helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

  • 2 months later...
  • 1 month later...
Posted (edited)

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

 

Edited by GE2023
type

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.