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