Cool Sticky Header Effects with jQuery and CSS3

Cool Sticky Header Effects with jQuery and CSS3
File Size: 19.8 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: Free for personal use
   

How to start using jQuery?

More in this category...

View our Recommended Plugins

TOP 100 jQuery Plugins 2013

In this article written by MARY LOU we're going to create various scroll effects for headers using CSS3 and jQuery waypoints plugin. The idea is to create an animated header which could be rotated in 3D or enlarged when Scroll/'>scrolling down the web page, please check the demo page before moving on.

Related plugins:

How to use it:

1. Create the html for the header that will be animated by adding the respective state class to it

<header id="ha-header" class="ha-header ha-header-large">
<div class="ha-header-perspective">
<div class="ha-header-front">
<h1> ... </h1>
<nav> ... </nav>
</div>
<div class="ha-header-bottom">
<nav> ... </nav>
</div>
</div>
</header>

2. Create the html for the sections with triggers

<section class="ha-waypoint" data-animate-down="ha-header-small" data-animate-up="ha-header-large">
...
</section>

3. Include component.css on the page, you can add, remove, or edit this CSS file to customize your own header effects

<link rel="stylesheet" type="text/css" href="css/component.css" />

4. Include jQuery library and jQuery waypoints plugin on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="js/waypoints.min.js"></script> 

5. The javascript

<script>
var $head = $( '#ha-header' );
$( '.ha-waypoint' ).each( function(i) {
var $el = $( this ),
animClassDown = $el.data( 'animateDown' ),
animClassUp = $el.data( 'animateUp' );

$el.waypoint( function( direction ) {
if( direction === 'down' && animClassDown ) {
$head.attr('class', 'ha-header ' + animClassDown);
}
else if( direction === 'up' && animClassUp ){
$head.attr('class', 'ha-header ' + animClassUp);
}
}, { offset: '100%' } );
} );
</script>

For more Advanced Usages, please check the demo page or visit the official website.