Obi-Wan Posted November 14, 2022 Share Posted November 14, 2022 (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 November 14, 2022 by Obi-Wan Added website info/password Link to comment
Ziggy Posted November 14, 2022 Share Posted November 14, 2022 This post may answer your question, the coding for backgrounds was subtly changed on the backend, so you may need to update your code:  Obi-Wan 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? Link to comment
Obi-Wan Posted November 14, 2022 Author Share Posted November 14, 2022 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! Link to comment
Ziggy Posted November 14, 2022 Share Posted November 14, 2022 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"> Obi-Wan 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? Link to comment
sarahcalvin Posted November 15, 2022 Share Posted November 15, 2022 Ziggy, I am having the same issue. Are you saying we should use the above code? Link to comment
Ziggy Posted November 15, 2022 Share Posted November 15, 2022 @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 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? Link to comment
awesomeorch Posted February 1 Share Posted February 1 Hey Ziggy! I'm having this same issue with the parallax code no longer working. Did y'all find a solution? Fingers crossed! Link to comment
GE2023 Posted March 18 Share Posted March 18 (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 March 18 by GE2023 type tuanphan 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment