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.

By in Playground on
Demo Download

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).

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

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 🙂

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.

Dynamic CSS Masks with Custom Properties and GSAP

On-Scroll 3D Stack Motion Effect

Kinetic Typography Page Transition

Stay in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!

Feedback 133

Comments are closed.

  1. Awesome effects, makes me want to take a better look at canvas, totally ignored it so far!

  4. Thanks for inspiration,
    The animation in Demo 1, used in a lot of movies. How does it called? I want to learn more about it.

    Thank you for lovely work Rachel

  5. Really loved the first demo “Connect three”, I dont know canvas too much but now i feel like i need to start learning it asap 😛

  6. Not to put a dampner on the lovely animations but they use between 40% and 60% of my CPU, in fact demo 2 uses 98% of m MacBookAir’s CPU. They are very nice though 🙂

    • Hi Nigel.
      Yes, using a large canvas can tax the CPU on certain devices (such as a macbook air hooked up to a large cinema screen), so it is good to be aware of this before going ahead and using canvas on a production website. Some ways to make this less intensive would be to use a smaller canvas for the effect (avoid fullscreen options) or use less objects in the canvas (ie. less ‘bubbles’ in demo 2).
      Canvas rendering performance will only improve over time as our devices’ advance. In the meantime it is fun to create these artistic effects 🙂

  16. Is there a way to make this full screen instead of just the header? like a background with the animation?

    • var canvas = document.createElement(“canvas”);
      var ctx = canvas.getContext(“2d”);
      ctx.canvas.width = window.innerWidth;
      ctx.canvas.height = window.innerHeight – 4;
      ctx.canvas.zIndex = “0”;
      document.body.appendChild(canvas);

      Will create a canvas that covers the page. I’m not sure if you could overlay the HTML/CSS content on top of that canvas though.
      Anyone else know?

    • Hi Bruno,

      As John described you need to make the canvas the same width and height as the window. Then if you set the canvas CSS position to fixed it will stay put as the background. You can then layer whatever HTML you want over the top with positioning and x-index. Cheers.

    • There is a way, to the canvas dynamic follow the height of div? In case as we use this like a background of site with scrollbar ??

  17. Great article Rachel, thank you.
    Codrops helped me very much too in getting started with web development.
    So it’s great to read others experienced the same.

    I’m looking forward to the next articles 😉

  27. 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.

  33. 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…

  35. 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.

  38. 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

  40. 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?

  45. Wow, I think at a smaller size, #2 shows this could work well for a logo I have in mind! Do you think that Adobe Animate could easily pull something like this off for an animated logo?

  46. Are you kidding, these are the awesome animations I have ever saw and I get to know How it works !!!!

    show us more…..!!!!!!!!!!!!!

  47. Absolutely stunning! I will be using the demo2 for a project for an NGO for Handicapped children.

  48. Those first two are just amazing 🙂 … definitely will experiment with them in near future 🙂 … thanks for sharing 🙂

  50. Hey very nice work like everytime ! Codrops is such a quality source of inspiration. So first thank you !

    I used your code on the home page of my website (www.thibautsoufflet.fr) but when you change size of screen or just ctrl +/ -, the effect doesn’t fit to the width of the screen size :/

    Do you have an idea why ? On your demo page everything works well but not mine.

    Thanks a lot !