Images used in this tutorial are from Aurimas on Flickr. He has many nice photos and you should go ahead and check them out.
The scrolling technique will feel more at home in one page websites but the animated header will go great with most of the websites that have a header. To be honest I don't think there are many websites that don't have a header nowadays.
This tutorial will only work on browsers that supports the most recent CSS3 features and this tutorial is not ready for production.
HTMLLet's start out by creating a "wrapper" what will hold the whole page.
The header which is the main feature of this tutorial will have two main elements besides "header-inner" which is used to center things out. The "header-inner-logo" will be used to hold both the icon element and the text element. The navigation links are located inside "header-inner-nav". You will see that I added "data-button" attribute to each link, this attribute will help us see which link will scroll to which section.
The sections are named "tab" and inside each tab I added an image and "tab-headline" element which also has a paragraph inside of it. You will see that all tabs have a "data-section" attribute. That is because we will use the value inside this attribute to point the header links to the right section.
CSSI will start by saying that #wrapper has nothing special just floats to the left.
The inner header element will have to be centered and I will do that by setting his position to auto both left and right.
The left side of the header will be occupied by the logo which has two elements: the icon of the logo itself and the text. I have created two elements instead of one because I wanted to give each element different properties.
In the right we have the navigation which doesn't have links but paragraphs since this will be one page only. The paragraphs have a fast fade in effect when it's in hover state.
You probably wonder why I have used the '.tab-headline' elements and then putting a paragraph inside and not getting rid of '.tab-headline' all together and just using the paragraph instead. The reason I did this is because I will later need the exact width of the element so I can center it in the middle of each section. Using a paragraph would not gave me an accurate width measurement because the paragraph will also have to support the border which will get in the way of our measurements. For now we will center it approximately by setting the left and the top position to 50%. The last thing I will mention is that we need to set the position of '.tab-headline' to absolute so we can position it freely inside of '.tab'.
The header animation will work like this: when a scroll is detected it will check if you are at the top of the document, if the header variable is set to 0 this means the header its in the initial position and we will have to change both the variable and the header to the other position. The first state of the header element is with the top margin set to 0 and with the background color set to white and 50% opacity, please keep in mind that the first position is when you scroll down and not when you are at the top of the document. The second position is when you are back at the top of the document and this will set the top margin to 20px and the background color is set to transparent this basically means no background color will be used.
The following step is to make the windows scroll to a particular section each time you click on a specific link in the header. We will do this by checking for clicks on elements that have the attribute 'data-button' attached to them. When a click its detected we will do an animated scroll by scrolling to that specific section that has the 'data-section' attribute value equal to the value of data-button' from the button that we clicked.
The way we will resize the tabs is by setting them equal to the height of the window. To center the .tab-headline element we will have to loop trough each headline because each element will have a different width. We will center it horizontally by getting the width of the element, dividing it in half and then putting minus in front of this value that we are getting. The vertical centering its done by taking the height of the element, dividing it by 2 and also putting minus in front the the value.
All of this that I have mentioned above will sit inside a function. The reason we are doing this is because we will use this code twice: the first time is when we load the page and the second time is when re resize the window.