CreativeBusiness Portfolio Theme

The Creative theme supports our brand new parallax engine which allows you to create awesome parallax effects in the theme headers. The header_top and header_bottom were especially prepared for this case.

The usage of this engine needs basic knowledge in HTML5 and CSS. To create your own parallax effect, you need to do three things:

1. create the necessary images (please remember about images for tablet and mobile devices)
2. create the proper Shortcode code
3. create the proper CSS code for the parallax effect elements.

Let’s start with the Shortcode code – the basic structure with one animated element seems as listed below:

[parallax name="gkp-background" area="200" height="400"]
gkp-circle;Circle;50%,50%;50%,100%
gkp-square;Square;25%,25%;75%,25%
[/parallax]

It will generate following code:

<div class="gk-parallax gkp-background" data-area="200" data-height="400">
	<div class="gk-parallax-wrap">
		<div data-start="50%,50%" data-end="50%,100%">Circle</div>
		<div data-start="25%,25%" data-end="75%,25%">Square</div>
	</div>
	<div>Tablet view</div>
	<div>Mobile view</div>
</div>

As we can see, the Shortcode contains three attributes:

• name– it is the unique class name for our parallax area
• area– it is a value in pixels which specifies when the animation starts. 0 means that the animation will start when the top edge of the header is at the top of the browser window. E.g. 400 means that the animation will start when the top edge of the header is 400 pixels from the top of the browser window.
• height – it is a height of the area which is necessary for us in pixels

The main container contains three other wrappers:

• gk-parallax-wrap – it contains animated elements
• gkp-tablet – it should be styled to contain the image for the tablet devices (please remember to set the height value for this wrapper)
• gkp-mobile – it should be styled to contain the image for the mobile devices (please remember to set the height value for this wrapper)

And now the most interesting part – animated elements – every animated element should be placed in the gk-parallax-wrapcontainer and have gkp-element class. Additionally, you will probably need to add also own class like gkp-circle or gkp-square.

Every animated element is defined using the following syntax:

CLASS_NAME;TEXT;START_POS_X,START_POS_Y;END_POS_X,END_POS_Y

Explanaition for all parts of the syntax:

• CLASS_NAME – the class name used in the CSS code for the element styling
• TEXT – the text used to add semantic context for the element
• START_POS_X and START_POS_Y – the start position coordinates (as percent values)
• END_POS_X and END_POS_Y – the end position coordinates (as percent values)

Please remember that the coordinates are calculated relatively to the center of the object!

So in the mentioned code, the circle will go to down of the parallax area and the square will go to the right side:

A few useful information:

1. You can use negative values to hide the element at the beginning of the animation
2. The order of the elements in the wrapper is very important – the last element will be at the top of the stack of layers
3. To get the background image, we recommend to add the own class for the gk-parallax container and use this class with the loaded class, i.e.:

   .loaded.gkp-background-top

   then, the background image will appear after page loading completes.