Great tutorials as always! I was wondering, I’ve just implemented Parallax Pro for my own blog. Is there a way to use a custom header image for each post, the way that Medium does: View at Medium.com Or how the new Ambiance Pro theme does it: http://demo.studiopress.com/ambiance/mobile-responsive/ Or how Dustin Stout did it on his use of Parallax Pro: http://dustn.tv/stunning-reading-experience/ Thanks!In this article I share the code I've put together while referring to a couple of my previous posts and Centric Pro and Agency Pro. Screenshot Screencast Note: Although I have developed this solution in Genesis Sample theme, it should work with minor adjustments in other StudioPress themes as well.
- Header: Fixed at top, slides up and goes away when scrolling down and fades into view when scrolling up.
- If the Post has a Featured image set, it will appear in full view (as high as visitor's browser viewport) via Backstretch.
- Header will appear as a transparent overlay at the top.
- Post title, post info and a down arrow will appear centered on the image. Clicking on the down arrow will scroll smoothly to the content area.
- When scrolling down Post title and post info will fade away and fade back in when scrolling up.
To view the full content, please sign up for the membership.
Already a member? Log in below or here.