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.

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.

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

Feedback 133

Comments are closed.
  1. Hi, I love the demo1!. However, I just wonder, How can I relocate the effect if I decide to move it to another location such as the footer or body instead of the header?

  2. Hi Rachel, awesome animation…
    wanted to know can i change the color of the bubbles in demo 2..??
    will appreciate the help…!!! 🙂

  3. Is there any way to relocate section with animation (demo-1)? I wanna use this animation in the middle of my home page? Anyone?

  4. Hello, first of all thank you for what you do moltissio. This site is gorgeous. Unfortunately I only found out today, but I’m really happy. I wanted to incorporate into my site created with WordPress this fantastic blackground. You say I can do it? I provat with a video that I have followed (https://www.youtube.com/watch?v=Z4xTsk2J_LQ) to create my own wallpaper and add it but I don’t know how to add it and if I can do it on wordpress.
    P.S. I wanted to integrate this animated background with your “Page Navigation Stack”. It’s possible to do it?

    I think you’ve realized that I’m not very good with codici.. but I’m beginning to understand at 50%

    Thank you so much, you are fabulous!

  5. first of all thank you too much for this awesome plugin , would you plz tell me how can i control the height and the color ?
    🙂

  6. Hi, Thank you for this animated background.
    How use this animated background for footer?
    please reply.
    thanks