- This topic has 11 replies, 4 voices, and was last updated 4 years ago by
Leo.
-
AuthorPosts
-
January 5, 2017 at 10:48 am #260992
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
January 5, 2017 at 8:35 pm #261118Tom
Lead DeveloperLead DeveloperHi 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-developmentJanuary 6, 2017 at 12:30 am #261161Joe
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 #261178Joe
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 #261287Tom
Lead 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 π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJanuary 6, 2017 at 10:37 am #261343Joe
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 #261470Tom
Lead 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 π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentApril 10, 2017 at 2:37 pm #304210John
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 #304212Leo
StaffCustomer 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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/April 10, 2017 at 5:19 pm #304236John
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 #304239John
Actually, never mind, I got it to work! Thanks again.
April 10, 2017 at 7:50 pm #304291Leo
StaffCustomer SupportGlad I could help!
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.