[Resolved] Header Parallax starting position background

[David]

Hi Tom / Leo,

any way to adjust the starting Y position of the background image?

thanks

David

[Leo]

Hi David,

In the page header? I think that causes some conflict with the parallax script.

Take a look at Tom’s explanation here: https://generatepress.com/forums/topic/reporting-bug-with-page-headers/

Let us know if this helps 🙂

[David]

Hi Leo,

thanks but that’s not the issue. I am using GP headers on product pages which is so cool. The parallax positions the images with a Y of 0;
The problem i have is the product featured images are square transparent background PNG’s so theres dead space top and bottom which means some images are effectively cropped off at the bottom.
I need to move the background-position-Y to negative value to counter act this but cant because the JS overrides this.
Can’t crop the images either as they are required as so for the shop.
Current workaround is to scale down the images which helps but doesn’t fix all….

thanks

David

[Tom]

Hmm, I’m not sure the current parallax JS could handle a negative starting point. I’ll look into it – it may be possible. It may be necessary on those specific products to deactivate the parallax script.

[David]

Hi Tom,

o.k – is it possible to kill the vertical movement on the background image? What i really want is the image to remain fixed on all devices hence the need for the JS…..

David

[Tom]

Try this:

.generate-content-header {
    background-position: center top !important;
    background-attachment: fixed;
}

[David]

Hi Tom – sorry I think you misunderstood that method doesn’t work on iOS Safari ☹️

[Tom]

Ah, right. Perhaps this will help?: https://stackoverflow.com/questions/23236158/how-to-replicate-background-attachment-fixed-on-ios

[David]

Hi Tom, thanks for looking into this for me, i have tried these workarounds before on other experiments with varying degrees of success. I’ll give them another go on this one which is using the GP Headers.

Alternatively can the parallax be slowed down to the point where it’s almost stationery?

[Tom]

You can try playing with this filter: https://docs.generatepress.com/article/generate_page_header_parallax_speed/

[David]

Thank you Tom – brilliant i added a conditional for is_product so it only effects my product headers to slow the rate accordingly. Reading the github on this module i notice you can pass data attributes such as PosX and PosY which is analogous with the CSS property so it should be able to handle a negative number.

Is there a function to write these values in?

Sorry i feel like i’m asking a little too much

[Tom]

Currently there aren’t any filters for those values.

You can of course, build your own script if you’re interested?

[David]

Thanks Tom – if only I knew where to begin! But willing to give it a go

[David]

Hi Tom, I almost nailed the issue by removing the full width header which causes the scaling issues but then had to resort to a 100vh height which lead to problems with sticking my price bar to the bottom of the header. lol

Can you share the function for the parallax speed? maybe i can hack it to apply to the positioning

[Tom]

Give this a shot.

First, we’ll remove the current script:

add_action( 'wp_enqueue_scripts', 'tu_switch_ph_parallax', 100 );
function tu_switch_ph_parallax() {
    wp_dequeue_script( 'generate-page-header-parallax' );
    wp_enqueue_script( 'custom-page-header-parallax', 'URL TO YOUR SCRIPT', array(), GENERATE_PAGE_HEADER_VERSION, true );
}

And here’s the script, which you would link to in the function above and adjust as needed:

function generate_parallax_element( selector, context ) {
    context = context || document;
    var elements = context.querySelectorAll( selector );
    return Array.prototype.slice.call( elements );
}

window.addEventListener( "scroll", function() {
    var scrolledHeight= window.pageYOffset;
    generate_parallax_element( ".parallax-enabled" ).forEach( function( el, index, array ) {
        var limit = el.offsetTop + el.offsetHeight;
        if( scrolledHeight > el.offsetTop && scrolledHeight <= limit ) {
            el.style.backgroundPositionY = ( scrolledHeight - el.offsetTop ) / el.getAttribute( 'data-parallax-speed' ) + "px";
        } else {
            el.style.backgroundPositionY = "0";
        }
    });
});

[Author]

Posts