Header documentation

Common elements

Every header contains an image displayed after loading - this image should have always a CSS class gkHeaderBg.

Elements in the header are animated in vertical direction. Elements with class gkAnimated are animated from the bottom, elements with classes gkAnimated reverse are animated from the top.

For every header the proper page suffix should be defined in the template settings under the Features tab. For Header I variation suffix is following: frontpage-header1, Header II should use suffix frontpage-header2 and Header III should use the frontpage-header3 suffix.

Header I

The first header variation uses the following code:

<h1 class="gkAnimate">Hello!<br />My name<br />is John</h1>
<p class="gkAnimate">I'm multidisciplined freelance designer specialise in rich interactive experiences for web. If you’ve got an exciting project, get in touch with me!</p>
<a href="#my-works" class="gkScrollDown gkAnimate reverse">Scroll Down</a>
<img src="/images/demo/header/header1.jpg" alt="John S." class="gkHeaderBg" />

Header II

This header variation uses the following code:

<h1 class="gkAnimate">Welcome!<br />My name is John</h1>
<p class="gkAnimate"><span>I'm multidisciplined freelance designer specialise in rich</span> <span>interactive experiences for web. If you’ve got an exciting</span> <span>project, get in touch with me!</span></p>
<a href="#my-works" class="gkScrollDown gkAnimate reverse">Scroll Down</a>
<img src="/images/demo/header/header2.jpg" alt="John S." class="gkHeaderBg" />

Header III

The last header variation uses the following code:

<img src="/images/demo/header/header_text_image.png" alt="Hello! My name is John" class="gkAnimate" />
<p class="gkAnimate"><span>I'm multidisciplined freelance designer specialise in rich</span> <span>interactive experiences for web. If you’ve got an exciting</span> <span>project, get in touch with me!</span></p>
<a href="#my-works" class="gkScrollDown gkAnimate reverse">Scroll Down</a>
<img src="/images/demo/header/header3.jpg" alt="John S." class="gkHeaderBg" />