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

From our sponsor: Don't spend all day sending messages. Automatically reach out to fans based on how they behave.

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

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

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

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

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

  5. 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 !

  6. Hey,

    Thank you for sharing those beautiful animations with us 🙂

    Is there a way to disable the fullscreen option.

    Many thanks!

  7. It’s just simply awesome, how could make these effects in wordpress? some help please!

  8. Can anyone tell me how to get the circles @ demo2 going downward and not upwards? Would be great!

  9. Does anyone know how to change the effect on demo 2? i want the effect to start at the top going to bottom of the screen. Please help me guys 🙂 thanks a lot

    • Hi krizirk
      To me it worked as follows:

      #demo-canvas{
      height : 100%;
      -ms-transform: rotate(180deg); /* IE 9 */
      -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
      transform: rotate(180deg);
      }