Site background parallax effect to body?

Hi Veronica,

You could try adding something like this into the wp_footer hook in GP Hooks:

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

That works great, thanks!!

You're welcome :)

Hi Tom
that's what i also was looking for - great ! ... but when i want the background to move during the parallax effect ... is that possible somehow ? ... thx

That code should move the body background image as you scroll down.

Hi. I used this code on one site, and it works! But the movement looks jerky. Is there a way to make it smoother? Thanks!

I think a "Parallax control" in the "Customizer > Background Images" section would be nice ;-)

The jerky-ness of it might be browser-specific. I'd need to see your site to know for sure :)

Thank you for your reply Tom. The site was required with urgency and is now online. I don't want to make tests on it. Maybe I make a test page later, because it's a common need.
Thanks again.

Tom, thanks so much for this! Would there be a way to apply this to #page rather than body?

Tom, thanks so much for this! Would there be a way to apply this to #page rather than body?

You can try using the same code but replace the indicated selector "body" in this line:
body_parallax_element( "body" ).forEach...

With "#page", which will look something like this:
body_parallax_element( "#page" ).forEach...

Thanks so much Elvin!

I've added this to but I'm now getting a blank screen. Any chance this would conflict with a header element image with parallax already applied?

I’ve added this to but I’m now getting a blank screen. Any chance this would conflict with a header element image with parallax already applied?

That may be it.

Try creating a new function:

Example:

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

You can try testing this out. Let us know how it goes.