parallax in sections

Home Forums Support parallax in sections

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #120366
    Ines Handschuh

    Hi Tom

    The way that parallax works at the moment is not really that impressive and a bit buggy (For some reason the image wraps back to the top on scrolling), the background image scrolls a bit under some text. Anyway, what I think most people want for the parallax effect is a section scrolling on top of a background image. This should be easy enough to do just allow the section to be a transparent colour (not sure why transparent colours are not possible in your theme?) and allow a background image for the section container. Then scrolling the page up and down will reveal different part of the background image as if you are walking past an open door (transparent section) and looking in (container background image). If you carefully design your background images in vertical sections, then you can have multiple parallax image effects for different sections.

    #120384
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    So are you basically wanting to remove the subtle movement of the background image, and just keep the background image fixed so the content rolls over it?

    #120390
    Ines Handschuh

    yes, that is more like the normal parallax effect found on website homepages

    #120396
    Tom
    Lead Developer
    Lead Developer

    That’s the more basic parallax effect – true parallax has the background image slightly moving as you scroll.

    You can disable this by adding this code:

    add_action( 'wp_print_scripts', 'generate_dequeue_parallax', 100 );
    function generate_dequeue_parallax() {
       wp_dequeue_script( 'generate-sections-parallax' );
    }

    Adding PHP: http://generatepress.com/knowledgebase/adding-php-functions/

    Then add this CSS:

    .generate-sections-container {
          background-attachment: fixed;
    }

    Adding CSS: http://generatepress.com/knowledgebase/adding-css/

    That should do it 🙂

    #120416
    Ines Handschuh

    Thanks, the css makes the images fixed now however the parallax setting does not turn off the scrolling on the sections any more

    #120426
    Tom
    Lead Developer
    Lead Developer

    So the background image is still moving when you scroll?

    Can you link me to the page?

    #120428
    Ines Handschuh

    I used the id of the section with the css so that I can turn on/off the scrolling, I now cant seem to get the image size to fit the container properly. Seems the background-attachment: fixed; css really offset and zoomed the image.

    #120429
    Ines Handschuh
    #120440
    Tom
    Lead Developer
    Lead Developer

    Unfortunately there’s not much that can be done about the stretching – when the attachment is set to fixed (the only way to get this effect), it stretches the image to fit the screen.

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