[Resolved] Site background parallax effect to body?

Home Forums Support [Resolved] Site background parallax effect to body?

Home Forums Support Site background parallax effect to body?

Viewing 14 posts - 1 through 14 (of 14 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!

    #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

    You’re welcome ๐Ÿ™‚

    #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.

    #1591502
    Kumara

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

    #1591503
    Elvin
    Staff
    Customer Support

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

    #1591515
    Kumara

    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?

    #1591520
    Elvin
    Staff
    Customer Support

    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.

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