Step by step
The goal is to reproduce the CANU.se website experience: http://www.canu.se/world . They welcome you with an expressive Hero section, and then, when you scroll down, the content of the page covers the Hero section. The menu sticks to the top and is slightly transparent. Here is my final sample designed with Adobe Muse CC: http://hiddenhero.businesscatalyst.com/
To create the sticky menu, I’ve added three elements in the header of my Master Page: an image (the icon of the website), a horizontal widget menu and a white rectangle in the back. I’ve set the opacity of the rectangle to 90% to make it slightly transparent.
To stick the menu to the top of the page:
- Make sure that your header is in a layer on top of all other layers. To do so, use the Layers panel of Adobe Muse CC.
- Select all your elements and use the “Pin” tool. Pin your elements to the top centre of the page.
To create the “Hidden Hero” effect, and to get your Hero section “covered” by the content of your page, follow these steps:
- Place all your Hero section elements in a layer that is under all the other layers.
- Select all the elements of your Hero section and use the “Pin” tool again. Pin your elements to the top centre of the page.
Download the project
If you want to play with this sample:
- Get Adobe Muse CC that is part of the Adobe Creative Cloud: http://creative.adobe.com
- Download my Adobe Muse project: http://creativedroplets.com/samples/adobemuse/window-web.muse.zip
If you have any question about Adobe Muse or the Creative Cloud, don’t hesitate and contact me via twitter or posting a comment on this blog.