Animated Background Header Effects


Today’s free inspiration and tutorial comes from Tympanus. 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.

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