parallax in sections

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

[Tom]

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?

[Ines Handschuh]

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

[Tom]

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 🙂

[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

[Tom]

So the background image is still moving when you scroll?

Can you link me to the page?

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

[Ines Handschuh]

website address is

http://www.hanseatic-security.de/

[Tom]

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.

[Author]

Posts