Jump to content

Parallax 7.1

Recommended Posts

Site URL: https://www.elevateptr.com/

Hi - does anyone know how I can adjust the custom code injected into my footer so the parallax code targets the first image on my homepage?  Would it be block specific? 

If not,  can anyone help me with the code to make a background image look good on mobile?  I left this main image as an image vs. a background as I added css so on a mobile view the image shrinks to fill the screen.

 

Thank you!

Screen Shot 2020-08-31 at 12.00.58 AM.png

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

@tuaphan that image can not be a background image for it to look good on mobile.  I want to add the Parallax scroll feature to that specific image.  The code is in the footer and is listed below.  So in addition to finding the .section-background img I need to add a line of code specific to that block and I can't figure out how to write that code.  Thanks for your help!

<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({
        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}.sqs-catalog .section-background img{visibility:visible!important;}.has-background .section-background .sqs-video-background img{visibility:visible!important}</style>

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.