Create a Parallax Header for Your Website (includes full source code)

When it comes to page headers there are sooo many creative options to choose from. I have been researching some of the unique headers over the last couple of months and here are my favourite picks.

1. Hero Header
2. Parallax Header
3. Portfolio Header

In the second part of this series, I will tell you more about Parallax Headers.

#2 Parallax Header

Before I tell you about Parallax Header, let me tell you a little more about the Parallax effect. With parallax effect, the background image scrolls at a different rate to the foreground text and other elements. This creates a sense of depth for your website. The parallax effect in web design has become popular over the last few years. If implemented properly, you can create an amazing user experience. But do it wrong and you get the worst UX!

Just like Hero Headers, Parallax headers are popular with One Page Websites too. It creates a visually appealing first-look for your website. It is easier to show you one rather than write about it. So here is a very simple parallax header from one of the popular WordPress Online Shop Themes called Tyrion.

In this video, you can see that the header images feels like a layer over which the header text and the web page content slide over. This is a parallax header in its most simple form. You can create many extricate designs too. When combined with animated header texts and elements, this type of header can bring in more variety and showcase your creativity on your website.

Sample Source Code

Now here is a little something for you. I have created a very simple parallax header using HTML, SCSS and jQuery.

Mr Logan (my husband) has a media company and creating websites is one of their fortes. So you can get in touch with his team at [email protected] if you want a parallax website or if you liked the theme Tyrion and need it to be customised for your needs.

If you enjoyed this article and found this useful, I am sure you will also enjoy my article about One Page Websites. You can also read my other articles on designing a website here or regarding other header designs here.