Menu
A+ A A-

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:

  1. create the necessary images (please remember about images for tablet and mobile devices)
  2. create the proper HTML5 code
  3. 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:

  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.

Drop in here

Lorem Ipsum DC
Ametconsecte5, Northbloc
3456 Eastern Bldg Ipsumcity
My Country

Call

+ 1800 123 456 8901

Mail

hello@company.com
support@company.com

Interesting stuff

Besides are some interesting links for you! Enjoy your stay :)

Facebook Twitter Google+ RSS Dribbble Vimeo

Twitter

Building CSS3 Notification Boxes with Fade Animations >> http://t.co/mlavcRTrif

3 hours, 28 minutes ago

We are the main sponsor of the upcoming JoomlaDay Poland 2013 (5-6th October) - http://t.co/gBXI9iDrMT http://t.co/Uqbwa0gTpo

4 hours, 57 minutes ago