10 Code Snippets For Creating Animated Headers & Video Backgrounds

Every great website needs a beautiful header to grab attention. It’s the first thing visitors see, and it’s the only thing encouraging visitors to scroll down.

If you want to grab attention fast, then a custom animated header is one way to do it.

And these examples are sure to grab anyone’s attention after they land on your site for the first time.

1. Animated Colorful Header

This is one awesome background design that mimics a Twitter-style header.

But the background color changes over time, moving through colors in a pure CSS gradient. And yes, this really does work on just CSS.

I have to say that this is the most impressive use of gradient motion on the web that I’ve ever seen. And it adds a really nice subtle BG effect so it’s noticeable but not distracting.

2. Responsive YT BG

So you want a custom YouTube video in your header. Sounds fun!

But it’s not all that easy to setup and it’s tough to get this fully responsive too.

However this snippet can save you loads of time and stress getting a video header onto your site.

It does run with a lot of JavaScript to embed the video dynamically and resize the background. Although most Internet users enable JavaScript, so it’s a safe choice for any website.

3. Header Banner Graphics

Now this is a super cool effect for your header. The pen was developed using JavaScript and a free library called Particles.js.

With just a few lines of code, you can add custom spinning circles, animated particles, and even text in motion.

This header is just a simple example of the many possibilities at your disposal with the Particles library.

4. Fullscreen BG GIF

I mentioned the fullscreen YouTube video background technique above which is a solid choice.

But if you want to use a custom animated GIF instead you take a look at this sweet example.

This pen runs entirely in CSS3, and with a bit of coding magic, you can scale any GIF to fit naturally into a header background.

This design specifically uses transparent colors to overlay the GIF, so it blends nicely into the layout’s color scheme, too.

5. Fancy Animated Particles

What I like most about this header design is the large combo of features.

The design sports three different design styles all mixed together:

• A background photo
• An overlay gradient
• Animated fizzy particles

Together, this creates a brilliant effect that’s sure to grab attention right on page load. The only trouble is actually editing the code to get this all set up and working properly.

6. Hero Panel w/ Video Background

From large hero headers to smaller heading styles, both can utilize this video background made with pure CSS3.

Actually, the video files are added directly into HTML, but they’re attached to HTML5 data attributes. This info can be pulled via CSS and used to embed custom animated backgrounds dynamically.

And there’s even more good news. Most browsers already support all of these features, so you’re not alienating a large chunk of your audience with this technique.

7. Responsive HTML5 Video Background

If you want to use jQuery for your embedded video header why not check out this pen created by developer Angus Russell.

It’s a brilliant example of the jQuery video BG plugin which you can get for free on GitHub.

But with this code at your fingertips, you’ll be able to copy/paste right into your layout and edit the design to suit your needs.

8. CSS Animated Header

I’ll be the first to say this animation is subtle. You really have to be looking for it to see it.

But with this pen you can design a very simple animated header with just a flat image file.

The image will automatically zoom in & out at a very slow pace. This feels reminiscent of classic parallax scrolling but with the bonus of not being tied to the user’s scroll behavior.

This means you’ll get the BG animation regardless of where you are in the heading section.

All of the codes are easy to set up, making this a simple choice for designers who want a mild animation effect.

9. Space In Motion

So this is one of the coolest background animations in this list, yet it’s also super specific in its design.

If your site could use a space-themed header then check out this animated background created by Jordan LaChance.

It uses a static background photo of space with a fractal-style webbing animation that follows your cursor around the page.

Note you would need quite a few JS dependencies(3 to be exact), but if you’re okay with adding some JS, then you’ll really enjoy using this header design on your own site.

10. Parallax Star BG

In a similar style as the spacey theme above you might also like this parallax star design put on CodePen by Saransh Sinha.

Again, this is free to mess with and add into your own page header if you wish.

Best of all, this runs on pure CSS so that you won’t be messing with JS dependencies.

All of these backgrounds offer totally different styles and match with different page headers. But if you know what you’re looking for, there’s a snippet in this list that you’ll love.