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

View demo Download source

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 🙂

View demo Download source

Previous:
Next:

Tagged with:

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

View all contributions by

Website: http://rachsmith.com/

Related Articles

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

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

  2. 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 😛

  3. 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 🙂

    • 8

      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 🙂

    • 19

      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?

    • 20

      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.

    • 21

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

  4. 22

    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 😉

Follow this discussion

Leave a Comment