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:
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-topthen, the background image will appear after page loading completes.