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 133

  1. 1

    Thank you very very much. I’ve never thought that all those awesome things like this can be shared! :)) Love it!

  2. 2

    Hi Rachel, ive been through all the comments so far, but i’m still not clear about using the animation as a fixed background and displaying Png logos or content over it.
    How can do it?
    BTW AWESOME work you did there! 😀

  3. 3

    Each time I think I’ve seen it all, you amaze me, again…
    Thanks for all of these, they’re awesome!

  4. 5

    Hi Rachel, very nice work !!! i had a little problem maybe its only me…
    it said circles[i].draw is not a funtion. did a little fix if any one is interested:

    function animate() {
    if(animateHeader) {
    ctx.clearRect(0,0,width,height);
    for(var i in circles) {
    if(i < circles.length){
    circles[i].draw();
    }

    }
    }
    requestAnimationFrame(animate);
    }

    thanks for your work !

    • 6

      Thanks so much for posting this fix – I was having the exact same problem!

  5. 8

    I work with wordpress and i love the Animated Background Headers but i don’t know how to do it,i will be grateful if anyones knows how to put this thing at my wordpress website.Thx

  6. 9

    nice work, but have some problem here, i try to put the canvas below on my other div element and it stop working .. any solution for this issue?

    • 11

      Try replacing the contents of the resize function with the following:

      function resize() {
      initHeader();
      initAnimation();
      }

      I guess there should be some refactoring in the initHeader function so we don’t repeat unnecessary code. Also, we should use debouncing or throttling for the resize event.
      Cheers

  7. 13

    Rachel, great animations.

    Viewing performance problem generated in Example 2. It can be overcome by limiting the number of elements.
    The original code, multiply the width of the resolution by .5, if the user has a very large resolution, the number of elements generated is much higher. Can be limited to a specified amount or decreasing the factor by which it multiplies and elements are generated.
    File: demo-2.js
    Line 24:
    for (var x = 0; x <width * 0.1; x ++) {

  8. 15

    Hi!
    Great stuff! Really loved it.

    I’m currently working on a portfolio website and would like to use one of these headers.
    Do you have any tutorials how i can implement this in a wordpress environment?

    Regards,
    Marco

  9. 16

    Hi,

    This animation is pretty cool and really classy.
    However I found an issue when integrating it into my current internal project.

    Here it is:
    I’m using a long home page sliced into 4 sections, with smooth scrolling from each one to next one.
    ONLY the first section is used with your script (so the fx is not concerning the WHOLE page but only the 1st block.)

    As this 1st block includes also a backstreteched background image, the moving particles you create are doing a cool job over this full width/height image.

    But, there’s a pb with the way you get the dimensions of the dom.
    In my case this could not be:
    width = window.innerWidth; because afaik, this does not exclude the width of the vertical scrolling bar (I have such bar of course)

    I guess this issue exists in all case with vertical scrolling bars.
    So when you define the canvas width, it got a to large width, and then creates an ugly horizontal scrolling bar as a consequence.

    So I solved this using :
    width = $(‘body’).innerWidth();

    //width = window.innerWidth; returns full windows size: too large if scrolling vertical bar exists!!
    // then this inaccurate width generates a too large canvas width giving horizontal scrolling bar !!

  10. 17

    I had never thought that there could be effects even like this. Loved that first effect. It was like a spidy…

  11. 18

    Hi All,

    I have succesfully implemented it in my wordpress environment.
    If you need help i can guide you through the instaliation.

    You can contact me via marco.janmaat93@gmail.com

    here you can see the implementation
    lirimo.nl/homepagetest
    (it is a play environment so dont watch the graphics and the rest).

    Cheers,
    Marco

    • 20

      He didn’t. The link is a hijack site. Email gets you on a spam/scam list for sure. Be cautious people. There are plenty of WordPress freelancers that will help you out.

  12. 22

    Hi there, such a nice effect, I’m amazed!!!

    Anyway, I just implemented this effect “Demo 1” in my wordpress site, works great but I want this effect to be displayed in the middle of my fold, not at the top, I mean still works but its no longer following the cursor if I set them in a different div. I’m not that skilled with this canvas thing.

    Any idea would be great and good welcome!

    Cheers!

  13. 23

    If u wanna change hight u have plenty methods to do so. The easiest way to do is to change in demo-1.js the height at line:

    12 and 101 to your size – for example 600.

    I want to change the mouse effect. I just wanna to let the animation in example play as it is in the center of the header.

    any Help?

    • 24

      Got it ^^

      just delete

      if(!(‘ontouchstart’ in window)) {
      window.addEventListener(‘mousemove’, mouseMove);

      in addListener() function.

  14. 25

    Hello,

    I would like to add the effect n°3 to my wordpress header.

    I tried to add the canvas markup, and others files like in the example, but it doesn’t work.

    It seems WordPress can access to my files (the file path is OK)…

    Can you help me ? 🙂

    Thank’s,

  15. 26

    Hey!! great stuffs over here!! but m trying to solve a prob and that is i am implementing demo-2 with a simple fade banner jquery.and here i cant put one static image on background.i have to use images in html scripts.and here the effect is working fine but images not showing at all!! give me some sollution if u guys have any!! 🙁

Follow this discussion

Leave a Comment