On Scroll Header Effects

Some inspiration for headers that animate when scrolling the page.

Header Effects

View demo Download source

You’ve surely seen those really cool on scroll effects for headers that have been around lately. One example is the header on the Riot Industries website by Phil Renaud which rotates in 3d on click and enlarges when scrolling down. Similar work has been done by Johnny Simpson where he explores Scroll Activated Fixed Header Animations. We’ve also created a Blueprint for an On-Scroll Animated Header to get you started.

Today we’d like to give you some inspiration for animated headers and show you what kind of effects could be used to spice up your website’s starting element and give it some life.

Please note: this only works as intended in browsers that support the respective CSS properties. Modern browsers only!

The demo for the effects serves as inspiration only and we’ve used a technique that involves changing the state classes of the header which would of course be customized depending on which effect would like to be used. It’s important to understand that the states depend on each other, i.e. changing from class A to class B does something (using transitions) and going from A to C might not cause the desired effect. So the order matters in this example that tries to show all the effects on one page.

Also note that scrolling super fast might cause a jump from the beforementioned class A to class C which might not always look very fancy.

In the demo we use the fantastic jQuery Waypoints plugin by Caleb Troughton.

The header is composed of various parts for showcasing all the effects. It has a perspective wrapper, a front and a bottom (for the 3d rotation):

<header id="ha-header" class="ha-header ha-header-large">
	<div class="ha-header-perspective">
		<div class="ha-header-front">
			<h1><span>Header Effects</span></h1>
			<nav>
				<a>‹ Previous Demo</a>
				<a>Something</a>
				<a>Anything</a>
				<a>Back to the article</a>
			</nav>
		</div>
		<div class="ha-header-bottom">
			<nav>
				<a>Dalliance</a>
				<a>Inglenook</a>
				<a>Lagniappe</a>
				<a>Mellifluous</a>
				<a>Erstwhile</a>
				<a>Wafture</a>
				<a>Serendipity</a>
				<a>Love</a>
			</nav>
		</div>
	</div>
</header>

We add a special class to the sections which will trigger the class change:

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

The data atrributes are used for setting the right classes depending on which direction we are scrolling. In our demo the animate-up data attribute contains the class of the previous animate-down one.

An example for a state class is the following “rotate” one:

.ha-header-rotate {
	height: 220px;
	top: 50px;
	padding-left: 50px;
	padding-right: 50px;
}

.ha-header-rotate .ha-header-front {
	transform: translateY(-100%) rotateX(90deg);
}

.ha-header-rotate .ha-header-bottom {
	top: 50%;
	transition: transform 0.5s;
	transform: rotateX(0deg) translateY(-100%);
}

The state classes are applied to the header element and from there we can define some changes for the children.

With the help of the Waypoints plugin we simply add the respective classes:

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%' } );
} );

We hope you enjoy the effects and that they give you some inspiration on how to make a fancy animated header.

View demo Download source

Previous:
Next:

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://www.codrops.com

Related Articles

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 64

Comments are closed.
  1. 7

    Thank goodness – I’ve been seeing this a few times and wanted to use it in my site. Thank you so much for your hard work and awesome sharing!

  2. 8

    omfg … this is so awesome. I love this.
    Thanks alot for all your tutorial Mary Lou.

  3. 10

    Mary,,, you’re my hero!.. & that just toke the header-menus into a whole new level.
    Amazing…
    Thank you, a lot.

  4. 11

    Oh I have so many ideas popping in my head to put these to use. I so love your work MARY LOU awesome!

  5. 12

    I love this kind of stuff – it’s really inspiring seeing what kind of effects people apply in these instances as well. Assuming that you’re only doing 1 or 2 header effects though, you could forgo using the waypoints plugin and limit your javascript to something like:
    $(window).scroll(function(){
    if ($(this).scrollTop() > $(‘someelement’).offset().top {
    $(‘#header’).addClass(‘animation’);
    } else {
    $(‘#header’).removeClass(‘animation’);
    }
    });

    • 13

      Hi

      Can you please help me in adding one more sub menu since there is option for only one sub menu in the code

      Thanks
      kiran

  6. 15

    Very nice! I will check out the code to see if I can learn a trick or two :D

  7. 17

    You’re amazing!
    Each work of yours is simply stunning… thank you a lot for these posts!

Comments are closed.