From our monthly sponsor: Automate manual QA and catch visual bugs with Percy’s all-in-one visual testing and review platform.
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
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.
We really hope you enjoy these examples and feel inspired to create some animated Canvas effects soon 🙂