Submit your widget

Very Cool Animated Header Scroll With jQuery

Created 5 years ago   Views 30446   downloads 7533    Author simbyone
Very Cool Animated Header Scroll  With jQuery
View DemoDownload
Share |

We will teach you how to create an animated header with scroll to a section of the page each time you click one of the links in the header. To make things a bit more interesting I also added a text heading to each section.

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.


Let's start out by creating a "wrapper" what will hold the whole page. 
<div id="wrapper"></div>

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. 

<div id="header">
<div id="header-inner">
<div id="header-inner-logo">
<div id="header-inner-logo-icon"><span class="iconb" data-icon=""></span></div>
<div id="header-inner-logo-text"><span>Awesome</span>Company</div></div>
<div id="header-inner-nav">
<p data-button="1">Home</p>
<p data-button="2">Projects</p>
<p data-button="3">About Us</p>
<p data-button="4">Portfolio</p>
<p data-button="5">Why Us</p>
<p data-button="6">Contact</p>

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. 

<div class="tab" data-section="1">
<img src="_assets/1.jpg" />
<div class="tab-headline"><p>Home</p></div>
<div class="tab" data-section="2">
<img src="_assets/2.jpg" />
<div class="tab-headline"><p>Projects</p></div>
<div class="tab" data-section="3">
<img src="_assets/3.jpg" />
<div class="tab-headline"><p>About Us</p></div>
<div class="tab" data-section="4">
<img src="_assets/4.jpg" />
<div class="tab-headline"><p>Portfolio</p></div>
<div class="tab" data-section="5">
<img src="_assets/5.jpg" />
<div class="tab-headline"><p>Why Us</p></div>
<div class="tab" data-section="6">
<img src="_assets/6.jpg" />
<div class="tab-headline"><p>Contact</p></div>

Read more: