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

Feedback 119

  1. 1

    Heya!! so damn amazing effects over here!! anyway having a prob and dont know how to fix it!!

    I am implementing demo 2 with a simple fade banner jquery. so i cant put a static image in css as a background-image.i m using multiple one.so i have to use images in html or script.but here doing that images are not coming only the effects are showing the fade banner is working behind that canvas effect, dont know actually wats d problem i am facing…let me know if u guys have any solution :)

  2. 5

    Hi there

    It looks like the script forces the header section to full height.
    Is there a way to remove this?
    I am using this in two different Pages, one uses full height and the other uses half height header, however the half height header is forced to full height by the script. I am guessing the problem is here:
    largeHeader.style.height = height+’px';

    Can anyone help?

    Thanks

    • 6

      there’s a line height = window.innerHeight, you can set it to window.innerHeight / 2;

  3. 8

    Rachel, about the DEMO 1, I have others things above the “canvas”, like a top fixed menu (about 120ps height) and then, the mouse tracker do not work properly, nor particles effects about positions. How to setting up – really – relative in the active page? Can you explain, please?

    Thank you very much.

  4. 16

    Hello Rachel Smith, I’d use this work on my web pages, but I do not know if this is possible. 1) I use a platform based on Joomla 3> and not know how to post it on my website. There is documentation to make this work? 2) it is a doubt I can use it freely?
    Thank you

  5. 20

    Hello,

    I want to make the demo-1 to be freeze and animate only when mouse move on. I want to use it in a banner and only one part of the image to animated.

    Thanks

  6. 21

    My website is using index.php – how would I add this code to my website?

    I just want to use the animation effect on my index.php website

Follow this discussion

Leave a Comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>