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:
Or how the new Ambiance Pro theme does it:
Or how Dustin Stout did it on his use of Parallax Pro:
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.
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.
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.
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:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.