Module 1: Build an animated hero header

If you've ever arrived on a website and been greeted by a large image or video, and some titles on top, then you've encountered the "Hero Header". It's a popular way to introduce a website, and can be a great opportunity to help people quickly understand what it is your site does.

For many visitors it'll be their first impression of your brand, so you'll want to make the most of this moment to present something that properly shows how great it is.

Source: DesignModo

Images, video, calls to action

A hero header is the place to feature large, striking images or videos explaining the site. These look great, but there's an opportunity to take it further by bringing animation into the mix. We can use animation to add polish to that first moment when the content appears, as well as use it to control the order in which information appears and draw the eye to what matters.

Taken to the extreme we can even use this space to tell a story about what we do, like this incredible example from Stripe.

Source: Stripe.com

Why CSS?

When we embed video or use animated GIF files to show animations, we add a lot of weight to the page. This makes sites take longer to load and can slow things down. This is particularly noticeable on slower connections, which is a problem many of us developers tend to forget about if we're lucky enough to be building our sites while plugged into fast broadband.

Studies have also shown that shaving seconds from the load time of sites has a great impact on the perceived quality of the site. If we make use of CSS, we can create impressive animations and movement with very little code and very little impact on the perceived speed of a website.

Browser support is also catching up. There was a time when this wasn't the case but in the last couple of years we've reached the stage where most of our visitors can benefit from CSS animation. For those that can't, we can build in fallbacks that ensure those visitors can still access our content.

Lastly, the animation and transition properties are built-in to our browsers. We don't need to load up the browser with extra JavaScript to make use of these technologies. In a web that all too often suffers interruptions and dropped requests, keeping our external dependencies low can be a good idea.

In this module we're going to learn some techniques for using animations and keyframes to bring life to a static hero header. Along the way we'll see how to create and tweak our own timing functions, we'll choreograph multiple animated items on screen, as well as learn how to combine multiple animations. We'll also take a look at creating reusable keyframes, and see how we can make sure all our content has loaded before our animations begin.

Download files: You should find attached to this lesson a file called 01.zip. This contains all the code for each lesson. Feel free to use it as you wish, or type along.

Let's get going!