Parallax for Logo and Site Header?

[Joe]

Hello,

I’m trying to figure out how to get a parallax effect on the site header and main site logo.

Is there a function for setting a parallax scroll (so the site header and logo scroll at different rates) or do I have to do that with a Page Header, or using Sections, or what…?

If there is something in the basic documentation or the forums about how to approach this, I would appreciate a pointer, as I haven’t been able to find it.

Thanks,

Joe

[Tom]

Hi Joe,

Not easy to do I’m afraid.

What do you mean by adding it to your logo? Any examples?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Joe]

Hello,

An example of the kind of thing I want to achieve is here: http://flevans.co.uk/ — the content on the header (in this case the text “New LP..”) scrolls at different rate from header background.

I’d like to do that but with the logo scrolling at a different rate to the header background using GeneratePress. Is that possible?

(Dev site that I’m working on is here: http://incandenza.net/gilouscafeDEV/ — I want logo text to scroll at different rate to header background).

Thanks!

[Joe]

I can get something approaching what I want it to do using Sections instead of the site header (http://incandenza.net/gilouscafeDEV/sections-test/) but this causes the image to repeat on scrolling on some screen sizes (as described in this forum post https://generatepress.com/forums/topic/broken-parallax-effect/, and many screen sizes do not scale down the background image properly whether I use Sections or Site Header.

Will these issues be fixed in the next version, and can you tell us when it will it be released?

Thanks!

[Tom]

You can actually fix that issue by adding this CSS:

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

Let me know if you need more info 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Joe]

Hi, thanks Tom, helps with the parallax and the image repeat issue.

Appears to still be some issues with smaller screens not resizing the background, but I’ll have a play with the responsive CSS next week and see what I can do.

Have a good weekend!

[Tom]

That’s the downfall of using background-attachment: fixed – it’s not great on mobile, which is why it’s not there by default.

You might need to set a different background image specific to mobile using media queries.

Let me know if you need more help 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[John]

I think I’m trying to do the same thing as Joe. How do you create a parallax right below the header, like the one shown in the page header video? I basically want to do something like that example, but have the parallax appear on everything — my home page, single blog posts and pages — not just one page.

Thanks for the great theme … JT

[Leo]

Hi John,

You can create the page header using Blog Page Header:
https://docs.generatepress.com/article/blog-page-header/

Then use the filter to display it everywhere else:
https://docs.generatepress.com/article/blog-page-header/#displaying-the-blog-page-header-elsewhere

Let me know if helps.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[John]

This is helpful, thanks. Got it working on the blog index, which was my main goal. The filter doesn’t work for me but I can live with that.

[John]

Actually, never mind, I got it to work! Thanks again.

[Leo]

Glad I could help!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts