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 leanirng CSS now.

Feedback 131

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

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

  3. 5

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

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

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

Follow this discussion

Leave a Comment