From our sponsor: Chromatic - Visual testing for Storybook, Playwright & Cypress. Catch UI bugs before your users do.
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).
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
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 🙂
Hi, I love the demo1!. However, I just wonder, How can I relocate the effect if I decide to move it to another location such as the footer or body instead of the header?
Hi,
This fake dude use your work like hers…
See : http://codepen.io/nodws/pen/vKoKoG
Only logo and background change… And he say : By @nodws with Greensock js.
Do something on this fake plz..
Best regards
super
Hi Rachel, awesome animation…
wanted to know can i change the color of the bubbles in demo 2..??
will appreciate the help…!!! 🙂
Is there any way to relocate section with animation (demo-1)? I wanna use this animation in the middle of my home page? Anyone?
Hello, first of all thank you for what you do moltissio. This site is gorgeous. Unfortunately I only found out today, but I’m really happy. I wanted to incorporate into my site created with WordPress this fantastic blackground. You say I can do it? I provat with a video that I have followed (https://www.youtube.com/watch?v=Z4xTsk2J_LQ) to create my own wallpaper and add it but I don’t know how to add it and if I can do it on wordpress.
P.S. I wanted to integrate this animated background with your “Page Navigation Stack”. It’s possible to do it?
I think you’ve realized that I’m not very good with codici.. but I’m beginning to understand at 50%
Thank you so much, you are fabulous!
Hi,
I am using this https://tympanus.net/Development/AnimatedHeaderBackgrounds/ demo, but its not working in ipad or touch devices, even not smooth on safari browser too.
first of all thank you too much for this awesome plugin , would you plz tell me how can i control the height and the color ?
🙂
Hi, Thank you for this animated background.
How use this animated background for footer?
please reply.
thanks
nice share.. Rachel..
i love demo1..I just used it on my page https://www.architecchi.com/
thanks
all are working , thank you