From our sponsor: Get suggestions for improving your content, targeting, and marketing automations to help you increase revenue.
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.
We really hope you enjoy these examples and feel inspired to create some animated Canvas effects soon 🙂
Awesome effects, makes me want to take a better look at canvas, totally ignored it so far!
Thanks Rachel these are brilliant.
this is super cool….thank you!
Thanks for inspiration,
The animation in Demo 1, used in a lot of movies. How does it called? I want to learn more about it.
Thank you for lovely work Rachel
Really loved the first demo “Connect three”, I dont know canvas too much but now i feel like i need to start learning it asap 😛
Not to put a dampner on the lovely animations but they use between 40% and 60% of my CPU, in fact demo 2 uses 98% of m MacBookAir’s CPU. They are very nice though 🙂
yes! exactly! (y)
Yes, using a large canvas can tax the CPU on certain devices (such as a macbook air hooked up to a large cinema screen), so it is good to be aware of this before going ahead and using canvas on a production website. Some ways to make this less intensive would be to use a smaller canvas for the effect (avoid fullscreen options) or use less objects in the canvas (ie. less ‘bubbles’ in demo 2).
Canvas rendering performance will only improve over time as our devices’ advance. In the meantime it is fun to create these artistic effects 🙂
Really inspirational stuff! I love demo 2, great design and simple, subtle animation.
Very impressive. I love the 1st demo the most. Canvas is great!
Very nice work i love spirit background 🙂
great work.. I congratulate you. thanks…
really good … and so amazing. thanks….
Any particulars you can provide for Demo 4?
any one else curious if this can be achieved with just CSS?
wow.. awesome article and experiment.
Is there a way to make this full screen instead of just the header? like a background with the animation?
var canvas = document.createElement(“canvas”);
var ctx = canvas.getContext(“2d”);
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight – 4;
ctx.canvas.zIndex = “0”;
Will create a canvas that covers the page. I’m not sure if you could overlay the HTML/CSS content on top of that canvas though.
Anyone else know?
As John described you need to make the canvas the same width and height as the window. Then if you set the canvas CSS position to fixed it will stay put as the background. You can then layer whatever HTML you want over the top with positioning and x-index. Cheers.
There is a way, to the canvas dynamic follow the height of div? In case as we use this like a background of site with scrollbar ??
Great article Rachel, thank you.
Codrops helped me very much too in getting started with web development.
So it’s great to read others experienced the same.
I’m looking forward to the next articles 😉
Awesome! Gotta try soon!
Check this logo http://www.creativeapplications.net/
Put your project on Github? Awesome!
Muy Bonito, Muchas gracias por tu tiempo !
Ten un buen día!
Great example, thanks a lot.
Great effect 😀
What a great content !
Thank you for sharing, you always surprise me guys ! 🙂
Good job !
Very nice :))) thanks!!
Is there a forum to discuss editing of these demos?
This is by far the best animated header image I have witnessed.
I have been following this website for almost a year now
It never ceases to amaze me.
I am going to try an incorporate this into my website unknown variables.
First one is horrible. At first look I thought a spider grip my cursor!!!
anyway to incorporate this into wordpress? if so does anyone know how to?
Wow! great stuff!
I really love this. Now, i’m trying to edit it and trying to add a button right below the title. But i failed really hard. I can’t get it out. Any advice to do this guys? I’d like to make this as a splash screen and when i click a button, it directs me to another html page. Need help here…
these are nice looking effects but the CPU usage is ridiculous. tried implementing demo1 as a header into a site and it actually made my code editor lag, CPU max out and macbook pro fans spin loud. thought it was a problem with Coda and actually ended up reinstalling it. took me a while to figure out this code was the culprit. not a good experience. first time that’s ever happened using code from codrops.
So in the end how did you manage to do it? I’ve been on it for a few hours already without success.
Cool! Thanks for sharing!
Awesome. I love it <3
This tutorial is sweet I can’t wait to sink my teeth into the source code on saturday and do some major tweaking. Thanks for sharing the love
Hi! The demo 2 not work in Weebly site creator (((
Demo 1 is really nice although for some reasons, it doesnt follow the cursor on chrome like it does on other browsers. Is it just me?
Awesome animations !!! Thank’s for sharing.
Trop Fort !!! Bravos
outstanding bro… unique
You’re “bro”-ing a female, you realize.
Wow, Animation were amazing.
Wow, I think at a smaller size, #2 shows this could work well for a logo I have in mind! Do you think that Adobe Animate could easily pull something like this off for an animated logo?
Are you kidding, these are the awesome animations I have ever saw and I get to know How it works !!!!
show us more…..!!!!!!!!!!!!!
Absolutely stunning! I will be using the demo2 for a project for an NGO for Handicapped children.
Those first two are just amazing 🙂 … definitely will experiment with them in near future 🙂 … thanks for sharing 🙂
Nice effect, i have used it on an under construction page for a client. http://www.nitrolabs.se/
Hey very nice work like everytime ! Codrops is such a quality source of inspiration. So first thank you !
I used your code on the home page of my website (www.thibautsoufflet.fr) but when you change size of screen or just ctrl +/ -, the effect doesn’t fit to the width of the screen size :/
Do you have an idea why ? On your demo page everything works well but not mine.
Thanks a lot !
I see that you have figured out why the screen size was changed. I have the same issue… what was going wrong?
I solved it.
height : 100%;