[Resolved] Site background parallax effect to body?

Home Forums Support Site background parallax effect to body?

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #350743
    Veronica

    Hi Tom,

    Sorry if this is a simple question; maybe I am just missing it somewhere. I searched the forums, but didn’t find an answer.

    I want the body background (i.e., the entire site, not sections) to have the parallax effect. Where do I do this? Is it as simple as adding the .parallax-enabled class to the body? If so, what would the code be for this?

    I love your theme, thank you SO much for all you’ve done!

    GeneratePress 1.3.48
    GP Premium 1.3.1
    #350945
    Tom
    Lead Developer
    Lead Developer

    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>
    #351183
    Veronica

    That works great, thanks!!

    #351227
    Tom
    Lead Developer
    Lead Developer
    #353423
    Ralf

    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

    #353555
    Tom
    Lead Developer
    Lead Developer

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

    #977553
    Daniel

    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!

    #977555
    Daniel

    I think a “Parallax control” in the “Customizer > Background Images” section would be nice 😉

    #977614
    Tom
    Lead Developer
    Lead Developer

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

    #979446
    Daniel

    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.

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.