Need Help Making this Parallax code work in mobile

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>

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

Thank you

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.

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.

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

Quote

.has-background:not(:has(.sqs-video-background))

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