Best jQuery Menus Plugins & Tutorials with Demo

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.

It’s become somewhat of a trend in web design to have a header that attaches to the top of the page as the user scrolls in order to provide the user with navigation or something along those lines. When the header attaches to the screen, we can use this point to create some pretty cool effects. In this tutorial we’re going to be looking at animations that activate as the user scrolls down.