Using the built in parallax effect in custom page templates

Here's the code we're using:

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( ".page-hero" ).forEach( function( el, index, array ) {
        var limit = el.offsetTop + el.offsetHeight;
        if( scrolledHeight > el.offsetTop && scrolledHeight <= limit ) {
            el.style.backgroundPositionY = ( scrolledHeight - el.offsetTop ) / hero.parallax + "px";
        } else {
            el.style.backgroundPositionY = "0";
        }
    });
});

So you'd want to change the generate_parallax_element name to something unique to you.

Then update the .page-hero class to the class you're using.

Thanks!
Where is 'hero.parallax' defined?
What element is it in relation to '.page-hero'?
A .parallax class gets added, if the parallax checkbox in the backend is checked?

I changed 'hero.parallax' to '-2' and got the desired effect working.
This code seems to be only suitable for merged hero sections that sit on the very top of the page.
What code is used, if a parallax section sits in the middle of the site?

Thanks again for taking the time to help!

I think I'm looking for the code that is triggered if the ".enable-parallax" class is added to a GPP section.

That's the exact same code with the elements changed:

function generate_sections_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_sections_parallax_element( ".generate-sections-container.enable-parallax" ).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-speed' ) + "px";
        } else {
            el.style.backgroundPositionY = "0";
        }
    });
});

It shouldn't matter where the element is, it will only begin parallaxing once the element is reached on the page.

In my setup, with the code above in place, the parallax effect only starts kicking in, when a parallax section hits the top (0-position) of the browser window. Once the section reaches the top of the browser window, the background-position-y gets manipulated. Before that it stays at 0px.

Any suggestions what I need to change to make the parallax effect kick in once the section enters the viewport?

You'd likely have to find a different script. That one was specifically built to start the effect once it hits the top of the browser.

You would likely need some sort of library for checking if the element is in the viewport.

Alright! Got it working with another script.
Thanks for taking the time!

Glad you got this working! :)