Animated Background Headers

A collection of animated background header effects for your inspiration. We use Canvas and Javascript to create an animated background for large site headers.
AnimatedHeaderBackgrounds

Today we’d like to share some animated header backgrounds for your inspiration. The full-page background image header has been a web design trend for some time. Recently people have been turning to animation to add more visual interest to their website headers, and today we share a few examples of how you can do this.

This collection uses JavaScript and Canvas to create various header animations. Each demo uses its own JavaScript file, but they each have similarities. Each example has:

  • an animation loop using requestAnimationFrame
  • shapes (circles, triangles, lines) that are being modified to create different effects

Demo 1 follows mouse movement on non-touch devices. Demo 1 and demo 3 use tweens from the GreenSock GSAP animation library.

When working with animated website headers, there are a couple of performance issues to keep in mind:

  • Keeping an animation loop running is JavaScript intensive, so it could affect the performance of your page if there are other JavaScript-heavy components.
  • Try to limit the number of calculations / processor intensive operations you place in your animation loop, this will keep the frame rate smooth.
  • Some mobile devices do not have very good Canvas performance, so you may consider using a fallback for mobile (such as a static image).

Take a look at the four different header backgrounds:

AnimatedHeaderBackgrounds_01
AnimatedHeaderBackgrounds_02
AnimatedHeaderBackgrounds_03
AnimatedHeaderBackgrounds_04

The image in demo 1 is by ESO and it was taken by the Visible and Infrared Survey Telescope for Astronomy (VISTA). The image in demo 2 is from Unsplash, an excellent source for high-quality public domain photos. The ornament was made using the Free Sable Kit from Pixel Buddha.

We really hope you enjoy these examples and feel inspired to create some animated Canvas effects soon 🙂

Tagged with:

Rachel Smith

Rachel Smith is an interactive developer that works predominately with animating interfaces using CSS and JavaScript. She works for Active Theory in Venice, California.

http://rachsmith.com/

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

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 133

Comments are closed.
  1. This is by far the best animated header image I have witnessed.
    I have been following this website for almost a year now
    AND
    It never ceases to amaze me.
    I am going to try an incorporate this into my website unknown variables.

  2. I really love this. Now, i’m trying to edit it and trying to add a button right below the title. But i failed really hard. I can’t get it out. Any advice to do this guys? I’d like to make this as a splash screen and when i click a button, it directs me to another html page. Need help here…

  3. these are nice looking effects but the CPU usage is ridiculous. tried implementing demo1 as a header into a site and it actually made my code editor lag, CPU max out and macbook pro fans spin loud. thought it was a problem with Coda and actually ended up reinstalling it. took me a while to figure out this code was the culprit. not a good experience. first time that’s ever happened using code from codrops.

    • So in the end how did you manage to do it? I’ve been on it for a few hours already without success.

  4. This tutorial is sweet I can’t wait to sink my teeth into the source code on saturday and do some major tweaking. Thanks for sharing the love

  5. Hello Rachel,

    Demo 1 is really nice although for some reasons, it doesnt follow the cursor on chrome like it does on other browsers. Is it just me?