On Scroll Header Effects

Some inspiration for headers that animate when scrolling the page.

Header Effects

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.

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 64

Comments are closed.
  1. 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. omfg … this is so awesome. I love this.
    Thanks alot for all your tutorial Mary Lou.

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

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

  5. 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’);
    }
    });

    • 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. You’re amazing!
    Each work of yours is simply stunning… thank you a lot for these posts!

  7. I would just like to say that Mary Lou, we love you!

    Every time you produce such amazing jquery and CSS tutorials. If I can help it, I only use your effects in my development.

    Thank you!! <3 <3

  8. This works in IE10
    Mary Lou, you have no idea how much you help the web community with the things you come up with here. Thank you so much for all your great work!

  9. IE10/11 are modern browsers. No need to bash them that hard in the note. IE8 may have been a shitty browser (by todays standards) but we still have to deal with it, also IE9 which is apart from transitions not even that bad. Your demo actually works there (of course without transitions).
    What I find a bit annoying is the simple arrogance of not even checking 🙁 Hope this is not put too harsh…

    • Buuuuuuuuuuuuuuuuu! Arrogance is people like you that still suports such obsolete browser.

    • Actually Doug, arrogance is people like yourself who assume usage should follow support and proceed to admonish those who support usage. People like Mike are not going to support obsolete browsers unless there is a very good reason to do so. Arrogance is placing design over accessibility and then wondering why you are losing sales. There are quite a few users in the world still using Windows XP and IE8, and often times your ROI on supporting IE8 is well worth it.

    • wow, your simply asking too much, for a “free” stuff.

      why not do it yourself mister.

  10. Awesome Mary! However I think I’ve found a major snafu. The initial wrapper has a fixed height. (Please correct me if I’m wrong in understanding how this works) This wrapper is for the animation divs to have proper transition origin “space” …? This wrapper however COVERS content on the page and playing with its z-index obviously hides the header itself behind page content. I’m sure others have this problem?

  11. How can i add one more sub menu can any one help me from the above we can only add one submenu is it possible to add one more sub menu

  12. What a great story that was, but the header kept doing these weird things as I scrolled down… haha jk, awesome effects!

  13. You’re great as always. 🙂
    just a little push : allow text selection when the header is hidden.
    component.css:228 :
    .ha-header-hide { ... /*++*/ top: -220px; ... }

  14. I’m trying to combine these header effects with the multilevel push menu…. for some reason I can’t get waypoint to detect when the .scroller or scroller-inner is scrolling. It always is expecting the viewport to scroll, but it doesn’t with the push menu. Any thoughts on getting Waypoint to detect when a div is scrolling and not rely on the viewport?

  15. Hi..
    Could you help me please..
    can i use your source code to blogger?, Where can i add the section?

    I wish to make my header and my menu appear initially, (in your code is “ha-header-subshow”).
    and then when its scrolled down , it will show My Menu Bar only..

    Thank you.
    Zamm.

  16. This works great, however, I am trying to do something slightly different. I would like my header to animate at the end of a section rather than the beginning. Ie: I have a full screen (responsive) image on the splash screen. Once the user scrolls past this image (the image disappears off the top of the page), the menu would appear. Similar to http://www.catscarf.com/ . How can I achieve this?
    Thanks.

    • Look into the offset settings for waypoints. I think you need to set it to 0 on the for the following element.

  17. Hi Mary,

    Can you please let me know – on 3rd click it working fine scrolling down. how to stat scroll on 1st scrolling down.

    Thanks
    Malaya

  18. Thx for your work… is great.
    Could you help me please. how i can in “box” effect expand menu after click on box?
    (sorry for my english)

    thank you
    IvoS

  19. Hi, I tried to use your HeaderEffects with this scrolling effect on my website:
    http://alvarotrigo.com/fullPage/
    I have tried every single thing but these header effects do not work on this template.
    I really like your work and wish to use it in my project.
    Please reply as soon as possible!