Cool Sticky Header Effects with jQuery and CSS3

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

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 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 class="ha-header-bottom">
<nav> ... </nav>

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">

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=""></script> 
<script src="js/waypoints.min.js"></script> 

5. The javascript

var $head = $( '#ha-header' );
$( '.ha-waypoint' ).each( function(i) {
var $el = $( this ),
animClassDown = $ 'animateDown' ),
animClassUp = $ '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%' } );
} );

This awesome jQuery plugin is developed by MARY LOU. For more Advanced Usages, please check the demo page or visit the official website.