From our sponsor: Ready to show your plugin skills? Enter the Penpot Plugins Contest (Nov 15-Dec 15) to win cash prizes!
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 🙂
Put in Codrops Github?
Hey,
Thank you for sharing those beautiful animations with us 🙂
Is there a way to disable the fullscreen option.
Many thanks!
it’s amazing !
codrops ‘s amazing
Just wanna say, Wooowww… @,@
how can do that @,@
many thanks for share it with us 🙂
It’s just simply awesome, how could make these effects in wordpress? some help please!
Can anyone tell me how to get the circles @ demo2 going downward and not upwards? Would be great!
Does anyone know how to change the effect on demo 2? i want the effect to start at the top going to bottom of the screen. Please help me guys 🙂 thanks a lot
Hi krizirk
To me it worked as follows:
#demo-canvas{
height : 100%;
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
How can i change the color of the connect dots @ demo 1???
ok……. somebody can explain how to do first animation on my website ?……………
Thank you very very much. I’ve never thought that all those awesome things like this can be shared! :)) Love it!
Hi Rachel, ive been through all the comments so far, but i’m still not clear about using the animation as a fixed background and displaying Png logos or content over it.
How can do it?
BTW AWESOME work you did there! 😀
Each time I think I’ve seen it all, you amaze me, again…
Thanks for all of these, they’re awesome!
Just lovely, I’ve managed to figure out how to implement it in my site and tweaked it a bit and got this as a result: http://thecodehome.tk/
Hi Rachel, very nice work !!! i had a little problem maybe its only me…
it said circles[i].draw is not a funtion. did a little fix if any one is interested:
function animate() {
if(animateHeader) {
ctx.clearRect(0,0,width,height);
for(var i in circles) {
if(i < circles.length){
circles[i].draw();
}
}
}
requestAnimationFrame(animate);
}
thanks for your work !
Thanks so much for posting this fix – I was having the exact same problem!
Nice examples
I work with wordpress and i love the Animated Background Headers but i don’t know how to do it,i will be grateful if anyones knows how to put this thing at my wordpress website.Thx
nice work, but have some problem here, i try to put the canvas below on my other div element and it stop working .. any solution for this issue?
Do you have any fix for resizing? If I load the page, then resize the browser window larger, the animated area doesn’t grow. For instance, initial load. Same window resized, without reloading. Note how the points stop behind the text? They won’t move past that point. Ideas?
Try replacing the contents of the resize function with the following:
function resize() {
initHeader();
initAnimation();
}
I guess there should be some refactoring in the initHeader function so we don’t repeat unnecessary code. Also, we should use debouncing or throttling for the resize event.
Cheers
HEY, excellent Pedro. Thanks for the assist!
Rachel, great animations.
Viewing performance problem generated in Example 2. It can be overcome by limiting the number of elements.
The original code, multiply the width of the resolution by .5, if the user has a very large resolution, the number of elements generated is much higher. Can be limited to a specified amount or decreasing the factor by which it multiplies and elements are generated.
File: demo-2.js
Line 24:
for (var x = 0; x <width * 0.1; x ++) {How would you add this effect to a WordPress website?
Hi!
Great stuff! Really loved it.
I’m currently working on a portfolio website and would like to use one of these headers.
Do you have any tutorials how i can implement this in a wordpress environment?
Regards,
Marco
Hi,
This animation is pretty cool and really classy.
However I found an issue when integrating it into my current internal project.
Here it is:
I’m using a long home page sliced into 4 sections, with smooth scrolling from each one to next one.
ONLY the first section is used with your script (so the fx is not concerning the WHOLE page but only the 1st block.)
As this 1st block includes also a backstreteched background image, the moving particles you create are doing a cool job over this full width/height image.
But, there’s a pb with the way you get the dimensions of the dom.
In my case this could not be:
width = window.innerWidth; because afaik, this does not exclude the width of the vertical scrolling bar (I have such bar of course)
I guess this issue exists in all case with vertical scrolling bars.
So when you define the canvas width, it got a to large width, and then creates an ugly horizontal scrolling bar as a consequence.
So I solved this using :
width = $(‘body’).innerWidth();
//width = window.innerWidth; returns full windows size: too large if scrolling vertical bar exists!!
// then this inaccurate width generates a too large canvas width giving horizontal scrolling bar !!
I had never thought that there could be effects even like this. Loved that first effect. It was like a spidy…
Hi All,
I have succesfully implemented it in my wordpress environment.
If you need help i can guide you through the instaliation.
You can contact me via marco.janmaat93@gmail.com
here you can see the implementation
lirimo.nl/homepagetest
(it is a play environment so dont watch the graphics and the rest).
Cheers,
Marco
How did you do it in wordpress friend? 🙂
He didn’t. The link is a hijack site. Email gets you on a spam/scam list for sure. Be cautious people. There are plenty of WordPress freelancers that will help you out.
How to change height??
Hi there, such a nice effect, I’m amazed!!!
Anyway, I just implemented this effect “Demo 1” in my wordpress site, works great but I want this effect to be displayed in the middle of my fold, not at the top, I mean still works but its no longer following the cursor if I set them in a different div. I’m not that skilled with this canvas thing.
Any idea would be great and good welcome!
Cheers!
If u wanna change hight u have plenty methods to do so. The easiest way to do is to change in demo-1.js the height at line:
12 and 101 to your size – for example 600.
I want to change the mouse effect. I just wanna to let the animation in example play as it is in the center of the header.
any Help?
Got it ^^
just delete
if(!(‘ontouchstart’ in window)) {
window.addEventListener(‘mousemove’, mouseMove);
in addListener() function.
Hello,
I would like to add the effect n°3 to my wordpress header.
I tried to add the canvas markup, and others files like in the example, but it doesn’t work.
It seems WordPress can access to my files (the file path is OK)…
Can you help me ? 🙂
Thank’s,
Hey!! great stuffs over here!! but m trying to solve a prob and that is i am implementing demo-2 with a simple fade banner jquery.and here i cant put one static image on background.i have to use images in html scripts.and here the effect is working fine but images not showing at all!! give me some sollution if u guys have any!! 🙁
Heya!! so damn amazing effects over here!! anyway having a prob and dont know how to fix it!!
I am implementing demo 2 with a simple fade banner jquery. so i cant put a static image in css as a background-image.i m using multiple one.so i have to use images in html or script.but here doing that images are not coming only the effects are showing the fade banner is working behind that canvas effect, dont know actually wats d problem i am facing…let me know if u guys have any solution 🙂
Heya!! good effects
Please use your own website thanks
Hello,
Great effects, how can I do first example?
Thank you!!
Hi there
It looks like the script forces the header section to full height.
Is there a way to remove this?
I am using this in two different Pages, one uses full height and the other uses half height header, however the half height header is forced to full height by the script. I am guessing the problem is here:
largeHeader.style.height = height+’px’;
Can anyone help?
Thanks
there’s a line height = window.innerHeight, you can set it to window.innerHeight / 2;
Looks great but the absolute positioning stops it being used in any practical sense.
Rachel, about the DEMO 1, I have others things above the “canvas”, like a top fixed menu (about 120ps height) and then, the mouse tracker do not work properly, nor particles effects about positions. How to setting up – really – relative in the active page? Can you explain, please?
Thank you very much.
Amazing work Rachel. Thanks.
I’m looking to use Demo one on my wordpress website. Does anyone know how to use it on WordPress?
@mike did you found how to use this in wordpress?
Cool thanks!
Hi guys, do any of you know how to change the header size? I tried but did not have any luck on that.
I got it, its ok guys! 😀
how did you change the header size??
Hello Rachel Smith, I’d use this work on my web pages, but I do not know if this is possible. 1) I use a platform based on Joomla 3> and not know how to post it on my website. There is documentation to make this work? 2) it is a doubt I can use it freely?
Thank you
anyway of getting these effects on wordpress??
Hi! Very great work!
How to turn the Example 2 upside down? To be like the snow.
Thanks for the answer.
how can i use demo 1 in the divi theme
Hello,
I want to make the demo-1 to be freeze and animate only when mouse move on. I want to use it in a banner and only one part of the image to animated.
Thanks
My website is using index.php – how would I add this code to my website?
I just want to use the animation effect on my index.php website
I already correct bugs on demo 1 if you want a help contact me arokglez@gmail.com or for another question.
bye.
help me pls…..
persian.msn3000@gmail.com
this demo(1) has a big bug.when open in small screen and resize your screen to larg.then you have no animation in the other place,and your animation is limited to first screen that you open it!
if you know anyway to resolve my problem please help me.or send me improve version of this example.
persian.msn3000@gmail.com
tnx.
Hi Rachel, is there any way to add the spidery cursor effect in Demo 1 to a website in Adobe Muse? Muse does have the option to include code by clicking on “Object”, “Insert Html”. I would like to use the effect on the whole page, not just the header, if possible. Please let me know how this can be done.