Danny asked,
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:
https://medium.com/life-tips/494224e0f983
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.
Summary
Site-wide
- Header: Fixed at top, slides up and goes away when scrolling down and fades into view when scrolling up.
Single Post pages
- 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.
Let's get started.
Javascript
All the below js files should be uploaded/created in child theme directory/js (create js directory if it is not existing). Ex.: wp-content/themes/genesis-sample/js/
1. Create a file named header-fade.js having the following code:
