Apple Juice
This was a quick personal project where I wanted to experiment with "Split Cover"page layout and try out making expanding headers in Axure.
​
Axure Prototype
​
The link below opens the prototype in Axshare. ​
You can close the grey menu on the left side of the screen using the arrow in the top left.
Features to note
​
The expanding sticky nav-bar (header) on the desktop version that triggers based on scroll distance.
​
On the mobile version, the nav-bar starts low on the screen and becomes a sticky nav-bar as you scroll down. Having the nav-bar lower is also beneficial to reachability on tall smartphones.
The nav-bar starts off on the right half of the page, leaving the image uncluttered.
When you start scrolling, the header expands with animation to the page width.
As you start scrolling, the nav-bar sticks to the top like a normal sticky header/nav-bar.
The nav-bar starts off on the right half of the page, leaving the image uncluttered.