- This topic has 11 replies, 4 voices, and was last updated 7 years ago by Leo.
-
AuthorPosts
-
January 5, 2017 at 10:48 am #260992Joe
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 #261118TomLead DeveloperLead DeveloperHi 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 #261161JoeHello,
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 #261178JoeI 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 #261287TomLead DeveloperLead DeveloperYou 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 #261343JoeHi, 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 #261470TomLead DeveloperLead DeveloperThat’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 #304210JohnI 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 #304212LeoStaffCustomer SupportHi 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-elsewhereLet me know if helps.
April 10, 2017 at 5:19 pm #304236JohnThis 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 #304239JohnActually, never mind, I got it to work! Thanks again.
April 10, 2017 at 7:50 pm #304291LeoStaffCustomer SupportGlad I could help!
-
AuthorPosts
- You must be logged in to reply to this topic.