Jump to content

Background parallax code injection works on home page but causes bleed for other pages on site

Recommended Posts

Site URL: http://sturmer.com.au/stories

Hi there,

I've applied some code in the code-injection section of my site wide footer to enable a parallax effect on the background images of my homepage (http://sturmer.com.au/) but it is causing problems on another page (http://sturmer.com.au/stories) by having the background images from the third section down bleed into other sections above.

I have tried pasting the site-wide footer code directly onto the homepage 'page' on a per-page basis but this only seems to affect the header.

Is there anyone able to assist and work out why this might be the case?

Thanks so much for your help

 

image.thumb.jpeg.bc9395e08ebf66efd626ee8368e3ce84.jpegimage.thumb.jpeg.b60b04dfe002e147a982c717de862993.jpeg

0a1d230d-85e6-4c3c-9865-ce38ef712e99.jpg

Link to comment
  • Replies 2
  • Views 147
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

1 hour ago, tuanphan said:

Hi,

Can you paste the code here? We can test it easier

Quote

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.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({
        bleed: 0,
        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}.has-background.background-width--inset{margin:4vw;padding:0!important}.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}</style>

Hi tuanphan,

Here’s what I think is the problematic code - works on the home page but causes issues on the /stories page. 
 

thanks for your help

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.