Jump to content

Need Help Making this Parallax code work in mobile

Recommended Posts

I used this code from schwartz-ed and i can't figure out how to make it work in the mobile version

if anyone can help find a way or offering another alternative to having an static image parallax effect that affects mobile

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

  $('.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);
        imageSrc: imgUrl,
        naturalWidth: imgWidth,
        naturalHeight: imgHeight,
        speed: .5,
document.getElementsByTagName("body")[0].onresize = function() {
    setTimeout(function() {
    }, 100)

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

Thank you

Link to comment

This plugin is not compatible on mobile devices by default. However, options to pass new arguments for IOS and Android exist within the plugin. There are also specific workaround cases available on the projects Github where you can get a better idea on how you can apply a fix for this.

The problem is that this code here has already been adapted to Squarespace and you might not find exactly what you're looking for online. I'd recommend maybe trying to use fixed positioning for the images as the fallback and make it seem like "static"-y feeling.

Link to comment
  • 5 weeks later...
On 11/26/2021 at 12:27 PM, IwanJ said:

Hi @Dalves. Hope you're keeping well?

You said the above CSS code works for you on desktop. If I only want my homepage top section video image to have the parallax effect, do I just use the first part of the code?

Thanks for your help.

Try replace this


with data section id. Use this tool to find id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.