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 132

  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

  7. 24

    this demo(1) has a big bug.when open in small screen and resize your screen to larg.then you have no animation in the other place,and your animation is limited to first screen that you open it!

    if you know anyway to resolve my problem please help me.or send me improve version of this example.

    persian.msn3000@gmail.com

    tnx.

  8. 25

    Hi Rachel, is there any way to add the spidery cursor effect in Demo 1 to a website in Adobe Muse? Muse does have the option to include code by clicking on “Object”, “Insert Html”. I would like to use the effect on the whole page, not just the header, if possible. Please let me know how this can be done.

Follow this discussion

Leave a Comment