Archived topic

Parallax for Logo and Site Header?

11 replies · Started by Joe on January 5, 2017

Viewing posts 1–12 of 12

January 5, 2017 at 10:48 am #260992

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

January 5, 2017 at 8:35 pm #261118

Hi Joe,

Not easy to do I'm afraid.

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

January 6, 2017 at 12:30 am #261161

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!

January 6, 2017 at 1:15 am #261178

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!

January 6, 2017 at 8:40 am #261287

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 :)

January 6, 2017 at 10:37 am #261343

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!

January 6, 2017 at 10:16 pm #261470

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 :)

April 10, 2017 at 2:37 pm #304210

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

April 10, 2017 at 2:44 pm #304212

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.

April 10, 2017 at 5:19 pm #304236

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.

April 10, 2017 at 5:37 pm #304239

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

April 10, 2017 at 7:50 pm #304291

Glad I could help!

This archived topic is closed to new replies.

Start building better websites today.