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