Parallax engine

The Creative template supports our brand new parallax engine which allows you to create awesome parallax effects in the template headers.

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

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

Let's start with the HTML5 code - the basic structure with one animated element seems as listed below:

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

As we can see, the main wrapper contains two data-* attributes:

data-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.
data-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-wrap container and have gkp-element class. Additionally, you will probably need to add also own class like gkp-circle or gkp-square.

Every animated element contains two data-* attributes:

data-start - the start position coordinates (as percent values)
data-end - 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:

Circle

Square

Tablet view

Mobile view

A few useful information:

You can use negative values to hide the element at the beginning of the animation
The order of the elements in the wrapper is very important - the last element will be at the top of the stack of layers
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.

Price Table

You can create a nice price table using the template typography:

Basic: ^$29monthly; 2 Users License; Free email account; Unlimited Databases; Campaign Builder; Basic customization; No discount codes; Sign Up

Standard: ^$59monthly; 5 Users License; Free email account; Unlimited Databases; Campaign Builder; Standard customization; 5 discount codes; Sign Up

Premium: ^$99monthly; 10 Users License; Free email account; Unlimited Databases; Campaign Builder; Extended customization; 10 discount codes; Sign Up

The price table can contains up to 5 columns. One of these columns can be highlighted with using an extra class. Additionally every black header of the specific column can be can be changed to blue header with using a blue class.

Basic: ^$29monthly; 2 Users License; Free email account; Unlimited Databases; Campaign Builder; Basic customization; No discount codes; Sign Up

Standard: ^$59monthly; 5 Users License; Free email account; Unlimited Databases; Campaign Builder; Standard customization; 5 discount codes; Sign Up

Premium: ^$99monthly; 10 Users License; Free email account; Unlimited Databases; Campaign Builder; Extended customization; 10 discount codes; Sign Up

Basic: ^$29monthly; 2 Users License; Free email account; Unlimited Databases; Campaign Builder; Basic customization; No discount codes; Sign Up

Standard: ^$59monthly; 5 Users License; Free email account; Unlimited Databases; Campaign Builder; Standard customization; 5 discount codes; Sign Up

Premium: ^$99monthly; 10 Users License; Free email account; Unlimited Databases; Campaign Builder; Extended customization; 10 discount codes; Sign Up

To prepare the column of the price table you need to use following structure:

<dl>
<dt>Basic</dt>
<dd class="price">
<sup>$</sup>29<small>monthly</small>
</dd>
<dd><strong>2 Users</strong> License</dd>
<dd><strong>Free</strong> email account</dd>
<dd><strong>Unlimited</strong> Databases</dd>
<dd>Campaign <strong>Builder</strong></dd>
<dd>Basic <strong>customization</strong></dd>
<dd><strong>No</strong> discount codes</dd>
<dd><a class="button" href="#">Sign Up</a></dd>
</dl>

For the dl elements you can use class blue or extra

All columns should be placed in the one wrap:

<div class="gkPriceTable col3">

The number of columns can be changed from 1 up to 5 columns by using classes col1-col5

Page break example

Ut dignissim aliquet nibh tristique hendrerit. Donec ullamcorper nulla quis metus vulputate id placerat augue eleifend. Aenean venenatis consectetur orci, sit amet ultricies magna sagittis vel. Nulla non diam nisi, ut ultrices massa. Pellentesque sed nisl metus. Praesent a mi vel ante molestie venenatis.

Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Mauris justo metus, ultrices id lobortis et, euismod sit amet metus. Maecenas sed nisl a arcu ultricies consectetur. Integer ut mollis elit. Nulla ultrices scelerisque mauris id commodo. Integer congue lectus et justo pellentesque sed semper lacus facilisis. Nunc tristique placerat odio eget rutrum.

Lire la suite : Page break example

Page Break

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin posuere nisi quis odio egestas non tempus est sollicitudin. Nulla facilisi. Pellentesque tempus suscipit nulla sed tempor. Phasellus et lorem id libero fermentum molestie sit amet sit amet mi. Quisque ultrices, neque et laoreet dictum, arcu sapien pulvinar odio, in aliquam mi dui eu leo. Nullam posuere, arcu et egestas fermentum, enim purus fermentum diam, quis porta mauris lectus ut odio. In tincidunt dapibus malesuada. Integer a lorem ligula. In tincidunt augue eget velit convallis nec pharetra eros tincidunt. Maecenas et tortor libero, vel malesuada est.

Quisque magna tellus, condimentum a porttitor eu, fermentum nec enim. Aenean et erat nec lectus adipiscing auctor. Sed tellus sapien, condimentum eget tristique ac, faucibus sed nisi. Curabitur pretium porta pulvinar. Integer cursus venenatis dictum. Morbi massa est, ultricies ut ultrices vitae, hendrerit vitae tellus. Duis a nulla quis tellus lacinia tristique.

Donec libero urna, cursus vitae sollicitudin sit amet, elementum et massa. Donec feugiat, turpis a dictum vulputate, dui diam faucibus nunc, ac sodales augue magna id augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sit amet nisi felis. Morbi faucibus nunc id elit aliquam ac condimentum leo laoreet. Sed nec risus sed nulla mattis volutpat in eget diam. In leo nisl, eleifend vel lobortis vel, tincidunt a ligula. Nulla placerat gravida laoreet. In lobortis, ligula in sagittis pellentesque, orci magna venenatis neque, eu sagittis lacus ante et tellus. Morbi vel semper augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat volutpat.

Module variations

On this page you can see basic suffixes used in this template. Please remember about using space at beginning of suffix name in module options!

Most of the suffixes can be used only on the mainbody, mainbody_top, mainbody_bottom or sidebar module positions.

The top1, top2, bottom1, bottom2, bottom3 module positions have dedicated styling of the modules. On the top1 or top2 module positions we recommend to use also " alpha" suffix.

The clear suffix is very useful to create banners or images without additional borders, margins and paddings. The clear suffix is also very useful inside the mainbody, mainbody_top and mainbody_bottom module positions.

On the bottom2 module position for the image banners we recommend to use the " banner" suffix - it will center the image and remove additional spacing.

The News Show Pro module has additional suffixes: centernav - which creates a bottom centered pagination and zoom - which adds the hover effect for the images - look at the "Latest Offers" module.

Additionaly there are two page suffixes: nobg and lightbg. First suffix is used to remove background from the mainbody, the second is used to change the position of the lighter background (it is useful to move the lighter background lower on the specific pages).

Parallax engine

Price Table

Page break example

Page Break

Module variations

Plus d'articles...

Drop in here

Call

Mail

LinkedIn

Our Service