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.

From our sponsor: Ship fast and never break a thing with Shortcut (formerly

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:


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. 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 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. 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: = height+’px’;

    Can anyone help?


  3. 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. I’m looking to use Demo one on my wordpress website. Does anyone know how to use it on WordPress?

  5. Hi guys, do any of you know how to change the header size? I tried but did not have any luck on that.

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

  7. Hi! Very great work!
    How to turn the Example 2 upside down? To be like the snow.
    Thanks for the answer.

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


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

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


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